JavaScript EventHandler

자바스크립트에서 이벤트핸들러를 등록하는 방법은 2가지다.

 

1. 이벤트타깃에 프로퍼티 지정

  1-1. onclick, onchange, onload 이런 st.: 이 기법은 널리 쓰이는 이벤트타입에 대해 모든 브라우저가 지원한다. 하지만 이 기법은 각 이벤트타입에 대해 하나의 핸들러만 등록됨을 가정하고 있다.

 

다음은 window객체의 onload 프로퍼티에 함수를 지정한 예이다. 이 함수가 이벤트핸들러가 된다.

window.onload = function(){
	console.log('test');
}

  1-2. 이벤트핸들러 프로퍼티로 핸들러 지정하기: HTML의 속성을 통해서 지정하는 것이다.

<button onclick="alert('Hello');console.log('안녕');">Click here</button>

 

 

2. 이벤트타깃의 메서드에 이벤드핸들러 지정

  2-1. addEventListener(): 파라미터는 총 3개 - 등록할 이벤트명, 지정한 이벤트타입 발생시 실행할 함수, 캡처링 사용여부 불리언값. (removeEventListener()도 있음)

 

다음 예시의 핵심은 onclick은 '1이벤트 1핸들러'를 가정하기때문에 여러개 만들어봤자 한개의 이벤트만 실행이 되지만 addEventListener는 다른 이벤트핸들러를 덮어쓰거나 수정하지 않는다는 점이다.  그래서 alert wow 뜨고 그 다음에 alert oh가 또 뜨는것임.

<button id="mybutton">Click</button>
<script>
	var b = document.getElementById('mybutton');
    b.onclick = function(){
    	alert('wow');
    }
    b.addEventListener('click', function(){alert('oh');}, false);
</script>

  2-2. attachEvent(): IE9 이전에는 addEventListener를 지원하지 않았고, 대신에 이와 유사한 attachEvent()를 정의했다.  (detachEvent()도 있음)