이벤트 전파 (버블링과 캡처링) (Section 38)

참고> opentutorials.org/course/1375/6768

 

1. 캡처링(Capturing) : 조상에게서 event가 발생하여 후손들에게 event가 내려가는 방식
-> 부모가 포함하고 있는 자식에게 어떤 이벤트가 발생하고, 해당 이벤트에 대한 핸들러를 부모와 자식이 모두 가지고 있으면 부모의 event handler 호출 후 자식의 event handler가 호출됨.
-> addEventListener()를 호출할 때 세번째 인자를 true로 두면 캡처링이 됨.
-> IE의 예전 버전에서는 지원되지 않던 기능이기 때문에 실제로는 많이 사용되지 않음.

2. 버블링(Bubbling) : 후손에게서 event가 발생하여 조상들에게 event가 올라가는 방식
-> 실제로 많이 사용됨
-> addEventListener()를 호출할 때 세번째 인자를 false로 두면 버블링이 됨.
-> 버블링은 모든 브라우저에서 지원됨
-> event 객체의 eventPhase 프로퍼티는 버블링 중 어느 계층에 속한 Node 객체에서 이벤트가 발생되고 있는지 알려줌
-> event 객체의 stopPropagation() 함수를 호출하여 필요에 따라 버블링을 중간에 끊어버릴 수 있음.