keyup
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<form action="">
<input type="text" id="data">
</form>
<div id="view"></div>
<script type="text/javascript">
var data = document.getElementById('data');
var view = document.getElementById('view');
data.addEventListener('keyup', function() {
view.innerHTML = data.value;
})
</script>
</body>
</html>
click
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<ul id="list">
<li>김밥</li>
</ul>
<button id="add">추가하기</button>
<script type="text/javascript">
var list = document.querySelector('#list');
var add = document.querySelector('#add');
add.addEventListener('click', function() {
var new_li = document.createElement('li');
var new_text = document.createTextNode('떡볶이');
new_li.appendChild(new_text);
list.appendChild(new_li);
})
</script>
</body>
</html>
mouseover
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>여러분 안녕하세요!</h1>
<script type="text/javascript">
var h1 = document.querySelector('h1');
h1.addEventListener('dblclick', function(){
h1.style.color = 'red';
});
h1.addEventListener('mouseover', function(){
h1.style.backgroundColor = 'yellow';
});
h1.addEventListener('mouseout', function(){
h1.style.backgroundColor = 'white';
});
</script>
</body>
</html>