반응형
1. 이벤트 버블링 캡처링 그건 뭔데?
HTML 에서 이벤트 처리 매커니즘 중 일부인데, 버블링과 캡처링 모두 이벤트가 DOM 트리를 통해 전파되는 방식이다.
2. 이벤트 버블링이란?
이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, 상위 요소로 전파되는 매커니즘이다.
말그대로 버블 방울이 위로 올라간다고 생각하면 편하다.
<div id="Rootparents">
<div id="secondParents>
<div id="child">
</div>
</div>
</div> 위와 같은 엘리먼트마다 click 이벤트가 있다고 가정하고, child 에 클릭이벤트를 실행하면
child -> second -> root 순으로 이벤트가 전파된다.
3. 이벤트 캡처링이란?
이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여, 하위요소로 전파되는 매커니즘이다.
<div id="Rootparents">
<div id="secondParents>
<div id="child">
</div>
</div>
</div>위와 같은 엘리먼트마다 click 이벤트가 있다고 가정하고, child 에 클릭이벤트를 실행하면,
Rootparents -> second -> child 순으로 이벤트가 전파된다.
4. 두개 똑같이 생겼는데, 이벤트 전파순서가 다른데 뭐 어쩌란거야?
이벤트 버블링과 캡처링은 둘다 발생하는데, 이벤트 버블링이 먼저 발생한 후에, 이벤트 캡처링이 실행된다.
이벤트 전파를 막으려면 event.stopPropagation() 을 사용하자.
반응형