<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
if(t.addEventListener){
t.addEventListener('click', function(event){
alert('Hello world, '+event.target.value);
});
} else if(t.attachEvent){
t.attachEvent('onclick', function(event){
alert('Hello world, '+event.target.value);
})
}
</script>
</body>
</html>
하나씩 쓰는 방법
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
var t1 = document.getElementById('target1');
var t2 = document.getElementById('target2');
function btn_listener(event){
switch(event.target.id){
case 'target1':
alert(1);
break;
case 'target2':
alert(2);
break;
}
}
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
</script>
</body>
</html>
이렇게 쓰면 함수 하나로 여러게를 쓸수 있다
'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글
| 23.JavaScript event 3 (0) | 2020.04.17 |
|---|---|
| 22.JavaScript event 2 (0) | 2020.04.17 |
| 19.JavaScript property (0) | 2020.04.17 |
| 18.JavaScript Inline (0) | 2020.04.17 |
| 17.JavaScript Coding setInterval (0) | 2020.04.17 |
Or71nH