Event flow & Event Handling

이벤트 흐름과 이벤트 핸들링

이 글에서는 이벤트 흐름과 핸들링에 대해 알아봅니다.

이벤트 흐름 단계

단 계	설   명
캡처링 단계(capture phase)	이벤트가 문서의 루트객체인 Document를 거쳐 이벤트가 발생한 타겟 객체의 부모 객체까지 전달되는 단계
타겟 단계(target phase)	이벤트가 발생한 객체로 전달되는 단계
버블링 단계(bubbling phase)	타겟 객체의 부모에서 Document 객체까지 전달되는 단계

Dom Level 2 - 이벤트 핸들링

addEventListener(), removeEventListener()

elm.addEventListener( string type, Function handler, useCapture)

addEventlistener 메소드의 매개변수

매개변수	설명
type	핸들링하고 싶은 이벤트 'load', 'click', 'mouseleave' 등...
handler	지정한 타입의 이벤트가 현재 요소로 전달되면 호출된 이벤트 핸들링 함수.  핸들러가 호출되면 Event 객체가 핸들러로 전달된다.
userCapture	true 설정시 이벤트 핸들러는 캡처링 단계에서만 호출,  false 라면 타켓 단계와 버블링 단계에서 호출된다.  보통  false를 사용한다

Event 객체의 멤버

속성 및 메소드	설         명
type	발생한 이벤트의 타입. ex) 'click', 'keydown'
target	원래 이벤트가 발생한 요소이며 currentTarget과는 다를 수 있다.
currentTarget	이벤트가 처리되고 있는 요소로서, 현재 실행되고 있는 핸들러가 등록된 요소를 반환한다. 만약 캡처링 또는 버블링하는 동안 이벤트가 처리된다면 이 속성의 값은 원래 이벤트가 발생한 target 속성과는 다를 수가 있다.  또한 이 값은 this와도 다를 수 있다. div.onclick = handler 인 경우는 핸들러에서 사용하는 this가 가리키는 객체가 명확하지만 div.addEventListener(type, handler, userCapture) 로 등록된 핸들러에서의 this는 대상객체가 명확하지 않다. 대부분의 브라우저에서는 addEventListener 방식으로 등록되더라도 이벤트 핸들러가 콜백될때 this의 값을 현재 이벤트 핸들러가 등록되는 요소를 가리키게 하지만 이는 표준이 아니다. 이러한 경우 currentTarget은 정확히 현재 이벤트 핸들러가 등록된 요소를 가리킨다.
bubbles	버블링 이벤트인지를 나타낸다. 버블링 이벤트라면 true, 아니면 false
cancelable	기본 액션이 존재하는지에 대해 알려준다.   즉, preventDefault() 메소드로 취소될 수 있는 이벤트인지를 알려주는 것이다.
eventPhase	이벤트 전파가 어떤 단계인지를 알려주는 상수값, 다음 상수 중 하나를 값으로 취한다   Event.CAPTURING_PHASE  Event.AT_TARGET  Event.BUBBLING_PHASE
preventDefault	브라우저가 이벤트와 관련된 기본 액션을 수행하지 않게 한다.
stopPropagation	캡처링, 타켓팅, 버블링 경로상에서 현재 핸들링되고 있는 객체 이상으로 이벤트가 전달되지 않게 한다

Jaehee's WebClub