1. 질문 던지기
"이벤트 버블링과 캡처링의 차이는 뭔가요?"
2. 답변하기
[질문에 대한 답]
"이벤트가 발생하면 기본적으로 이벤트 전파가 일어나는데 이벤트 전파 방향에 따라서 이벤트 버블링이냐, 이벤트 캡처링이냐고 결정 됩니다."
- 이벤트 버블링은 거품이 아래에서 위로 올라온다는 것을 비유해 자식 -> 부모로 올라가는 이벤트 전파 방향을 의미 합니다.
- 이벤트 캡쳐링은 버블링의 반대로 위에서 아래로 내려온다는 것을 의미 합니다.그래서 부모 -> 자식으로 이벤트가 전파 되는 방향을 의미 합니다.
- 브라우저는 기본이 이벤트 버블링이 발생합니다. 이를 설정하는 방법은 이벤트를 등록할때 3번째 인자로 options를 설정하는데 그 부분을 설정하면 이벤트 전파 방향을 정할 수 있습니다.
[스스로 질문의 범위 확장해보기]
- 이벤트를 막을 수 있는 방법에는
preventDefault()와stopPropogate()가 있습니다. 둘의 차이는preventDefault는 이벤트 기본동작을 막는것이고,stopPropogate는 이벤트 전파를 막는것 입니다.- 이벤트를 체크하는 방법에는
e.target과e.currentTarget이 있습니다.target은 최초로 이벤트가 발생한 요소이고,currentTarget은 지금 현재 이벤트의 요소 입니다.- 이벤트를 등록하는 것은 굉장히 많은 메모리를 잡아먹습니다. 그래서 상위요소에만 이벤트를 등록하고, 하위 요소에서 이벤트가 발생하면 이벤트 전파로 이를 처리하면 적은 메모리로 이벤트를 처리할 수 있습니다.
- css중에 이벤트전파를 막는 클릭 이벤트를 발생시키지 않은 css가 있습니다.
pointer-events: none
3. 답변부분 교정하기 & 새롭게 알게 된 사실
1) css의
pointer-events: none은 '이벤트 전파'를 막는다보다는 해당 요소가 마우스 이벤트의 대상이 되지 않게 합니다. 또 이로 인해 이벤트 전파가 막아지는것은 아니며, 이벤트 버블링은 여전히 발생합니다.
2가지 케이스에 대해서 살펴보겠습니다.
1) 클릭해도 아무일도 안일어남 => div가 이벤트를 차단해서 button까지 이벤트가 도달되지 않음
<div style="pointer-events: none;">
<button onclick="alert('clicked')">버튼</button>
</div>2) button에서 이벤트가 발생할 수 있기 때문에 alert()이 동작하고, 버블링도 발생합니다. 하지만 div 요소는 pointer-events:none 이기 때문에 제외되고 버블링이 발생합니다.
<div style="pointer-events: none;">
<button style="pointer-events: auto;" onclick="alert('clicked')">버튼</button>
</div>