[JavaScript] - 이벤트 버블링 , 캡처링

이벤트 버블링 / 이벤트 캡쳐링

 

“이벤트 전파 방식은 이벤트가 발생한 요소에서부터 시작하여 부모 요소로 전파되는 과정을 이해하는 데 중요”

 

 

이벤트 버블링

이벤트가 발생한 요소에서 시작 → 상위 부모 요소로 전파되는 방식

• 가장 깊은 요소에서 시작하여 부모 요소를 거슬러 올라가며 각 요소에 할당된 이벤트 핸들러가 실행

 

특징

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

<p> 요소를 클릭하면 다음 순서로 이벤트 핸들러가 실행

1. <p> 요소의 핸들러 실행
2. 부모 <div> 요소의 핸들러 실행
3. 최상위 <form> 요소의 핸들러 실행

이러한 이벤트 전파 방식은 대부분의 이벤트에 적용

이를 통해 상위 요소에서도 하위 요소에서 발생한 이벤트를 감지하고 처리 가능

 

 

---

 

 

이벤트 캡처링

이벤트가 최상위 부모 요소에서 → 시작하여 이벤트가 발생한 요소까지 전파되는 방식

• 이벤트가 상위 요소에서 하위 요소로 내려가며 각 요소에 할당된 이벤트 핸들러가 실행

 

특징

이벤트 핸들러를 등록할 때 세 번째 인자로 true를 전달하면 해당 핸들러는 캡처링 단계에서 실행

element.addEventListener('click', handler, true);

• 위 코드에서 handler는 캡처링 단계에서 실행
• 이벤트가 해당 요소에 도달하기 전에 호출

 

---

 

 

event.target과 this의 차이점

• event.target
  • 이벤트가 실제로 발생한 가장 안쪽의 요소를 가리킴
  • 이벤트가 버블링되더라도 변하지 않음
• this
  • 현재 실행 중인 핸들러가 할당된 요소를 가리킴
  • 이벤트 핸들러가 부착된 요소를 참조

ex)

<form> 요소에 클릭 이벤트 핸들러가 있고, 그 안의 <p> 요소를 클릭했다면:

• event.target은 <p> 요소를 가리킴
• this는 <form> 요소를 가리킴

 

---

 

 

이벤트 전파 중단

• 이벤트 핸들러 내에서 event.stopPropagation() 메서드를 호출
• 해당 이벤트는 더 이상 상위 요소로 전파되지 않음

element.onclick = function(event) {
  event.stopPropagation();
  // 이벤트 처리 로직
};

 

 

 

---

출처

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링