addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.
1 2 3 4 5 6 7 | <input type="button" id="target" value="button" /><script> var t = document.getElementById('target'); t.addEventListener('click', function(event){ alert('Hello world, '+event.target.value); });</script> |
이 방식은 ie8이하에서는 호환되지 않는다. ie에서는 attachEvent 메소드를 사용해야 한다.
1 2 3 4 5 6 7 8 9 10 | 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, '+target.value); })} |
이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다.
1 2 3 4 5 6 7 8 9 10 | <input type="button" id="target" value="button" /><script> var t = document.getElementById('target'); t.addEventListener('click', function(event){ alert(1); }); t.addEventListener('click', function(event){ alert(2); });</script> |
이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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> |