티스토리 뷰
이벤트 버블링이란?
버블링(bubbling)의 원리는 간단합니다.
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다.
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
가장 안쪽의 <p>를 클릭하면 순서대로 다음과 같은 일이 벌어집니다.
- <p>에 할당된 onclick 핸들러가 동작합니다.
- 바깥의 <div>에 할당된 핸들러가 동작합니다.
- 그 바깥의 <form>에 할당된 핸들러가 동작합니다.
- document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.
거의 모든 이벤트는 버블링 됩니다.
키워드는 ‘거의’ 입니다.
focus 이벤트와 같이 버블링 되지 않는 이벤트도 있습니다. 버블링 되지 않는 이벤트의 종류에 대해선 조금 후에 알아보겠습니다. 몇몇 이벤트를 제외하곤 대부분의 이벤트는 버블링 됩니다. |
예시
아래 핸들러는 <div>에 할당되어 있지만, <em> 이나 <code>같은 중첩 태그를 클릭해도 동작합니다.
<div onclick="alert('div에 할당한 핸들러!')">
<em><code>EM</code>을 클릭했는데도 <code>DIV</code>에 할당한 핸들러가 동작합니다.</em>
</div>
이벤트 캡쳐링이란?
이벤트엔 버블링 이외에도 ‘캡처링(capturing)’ 이라는 흐름이 존재합니다. 실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있으므로 알아봅시다.
표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다.
- 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
- 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
- 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계
이벤트 버블링과 캡쳐링의 차이점
이벤트 버블링
하위박스 -> 상위박스 순으로 올라갑니다.
이벤트 캡쳐링
상위박스 -> 하위박스 순으로 내려갑니다.
버블링 중단하기
이벤트 버블링은 타깃 이벤트에서 시작해서 <html> 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생합니다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이 때도 모든 핸들러가 호출됩니다.
그런데 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있습니다.
이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 됩니다.
아래 예시에서 <button>을 클릭해도 body.onclick은 동작하지 않습니다.
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
<button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>
event.stopImmediatePropagation()
한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작합니다.
event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못합니다. 버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막으려면 event.stopImmediatePropagation()을 사용해야 합니다. 이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않습니다. |
꼭 필요한 경우를 제외하곤 버블링을 막지 마세요!
버블링은 유용합니다. 버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지 마세요. 아키텍처를 잘 고려해 진짜 막아야 하는 상황에서만 버블링을 막으세요.
event.stopPropagation()은 추후에 문제가 될 수 있는 상황을 만들어낼 수 있습니다. 문제가 발생할만한 시나리오를 살펴봅시다.
|
'Javascript' 카테고리의 다른 글
문자열 Method (0) | 2022.03.11 |
---|---|
Javascript 마우스 이벤트 (0) | 2022.02.24 |
배열 Method (0) | 2022.02.15 |
Javascript 데이터 제어하는 방법 (0) | 2022.02.14 |
Javascript 함수의 종류 (1) (0) | 2022.02.14 |