객체나 요소의 메소드로 이벤트 리스너를 전달하는 방법

 

 

객체나 요소의 메소드로 이벤트 리스너를 전달하는 방법

·       표준 이벤트 모델

·       웹 표준을 만드는 단체인 W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델입니다.

·       객체나 요소의 메소드로 이벤트 리스너를 전달하는 방법입니다.

·       이벤트 리스너를 프로퍼티로 등록할 때는 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 메소드에서는 "on"이 붙지 않은 이벤트 타입을 사용해야 합니다.

 

객체나 요소의 메소드로 이벤트 리스너를 전달할 때는 다음의 메소드를 사용할 수 있습니다.

메소드	설명
addEventListener(eventName, handler, useCapture)	이벤트 연결
attachEvent()	이벤트 연결
removeEventListener(eventName, handler)	이벤트 제거
detachEvent()	이벤트 제거

 

 

addEventListener()

·       addEventListener() 메소드는 거의 모든 브라우저에서 지원하는 이벤트 리스너 등록을 위한 메소드입니다.

·       표준 이벤트 모델은 인터넷 익스플로러 이벤트 모델과는 달리 이벤트 이름(eventName)을 매개변수로 입력한다는 점에 주의해야합니다.

·       addEventListener() 메소드를 사용하면, 하나의 객체에 여러 개의 이벤트 리스너를 등록할 수 있습니다.

·       이벤트 리스너 안에서 this 키워드가 이벤트 발생 객체를 의미합니다.

 

대상객체.addEventListener(eventName, handler, useCapture)

 

인자	설명
eventName (이벤트 명)	이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달합니다.
handler (실행할 이벤트 리스너)	지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달합니다.
useCapture (이벤트 전파 방식)	매개변수 useCapture는 입력하지 않으면 자동으로 false를 입력합니다. false이면 버블링(bubbling) 방식으로 이벤트를 전파합니다. true이면 캡처링(capturing) 방식으로 이벤트를 전파합니다.

 

 

 

 

attachEvent()

addEventListener() 메소드는 IE 8과 그 이전 버전, 오페라 6과 그 이전 버전에서는 지원하지 않으므로, 이와 유사한 동작을 하는 attachEvent() 메소드와 detachEvent() 메소드를 대신 사용해야 합니다.

 

메소드	지원 브라우저 버전
addEventListener()	IE 8 이상 버전, 오페라 6 이상 버전
attachEvent() detachEvent()	IE 8과 그 이전 버전, 오페라 6과 그 이전 버전

 

 

 

 

removeEventListener()

등록된 이벤트 리스너를 삭제합니다.