본문으로 바로가기

Event flow & Event Handling

category JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:02

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

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




이벤트 흐름 단계


 단 

설   명 

   캡처링 단계(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