[코딩애플,mdn 등] 이벤트버블링과 이벤트캡쳐링 및 관련 유용한 함수들

이벤트가 DOM트리를 타고 발생하는 흐름

1. 이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려간다. 이벤트는 트리를 따라 내려가면서 addEventListener(..., true)로 할당한 핸들러를 동작시킵니다. addEventListener(..., true)의 true는 {capture: true}의 축약형이다.
2. 이후 타깃 요소에 설정된 핸들러가 호출된다.
3. 이후엔 이벤트가 event.target부터 시작해서 다시 최상위 노드까지 전달되면서 각 요소에 on<event>로 할당한 핸들러와 addEventListener로 할당한 핸들러를 동작시킨다. addEventListener로 할당한 핸들러 중, 세 번째 인수가 없거나 false, {capture: false}인 핸들러만 호출된다.

---

이벤트버블링

<div> <!-- 여기도 발생-->
  <div> <!-- 여기도 발생-->
    <p>안녕</p> <!-- 여기에 이벤트를 걸면 -->
  </div>
</div>

html 하위 요소(태그)에 이벤트가 발생했을 때, 그 요소의 상위 요소까지 이벤트가 실행되는 것을 뜻한다.

(모든 이벤트가 버블링되지는 않는다. ex. focus, blur, mouseenter, mouseleave)
-> 위 이벤트를 버블링하고 싶다면 focusin, focosout, mouseover, mouseout으로 대체할 수 있다.

---

.stopPropagation()

button.addEventListener('click', (e) => {
  e.stopPropagation();
  console.log("button was clicked");
})

이 함수를 이벤트에 붙이면 상위 요소로의 이벤트 버블링을 막는다.

** stopPropagation을 너무 남발하면 해당 이벤트 영역이 죽은 영역(Dead Zone)인지 모르고 이벤트가 왜 동작하지 않는지 모르는 경우가 생기기 때문에, 반드시 이유를 가지고 써야 한다. (참고 : https://ko.javascript.info/bubbling-and-capturing)

.stopImmediatePropagation()

function myFunction(event) {
  alert ("Hello World!");
  event.stopImmediatePropagation(); // 여기
  alert ("I will not get to say Hello World"); //이것까지만 실행된다.
}

function someOtherFunction() {
  alert ("I will not get to say Hello World"); // 무시
}

var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

stopPropagation()은 해당 이벤트핸들러의 위쪽으로 일어나는 버블링은 막아주지만, 요소의 다른 이벤트핸들러의 작동까지 막지는 못한다.그러나 stopImmediatePropagation()은 그 후 이벤트핸들러를 전부 무시한다.

.preventDefault()

요소의 고유 동작을 중단시킨다.

---

이벤트캡처링

//아래 둘 다 동일한 기능을 한다.
target.addEventListener("click", function(){}, true);
target.addEventListener(..., {capture: true});

이벤트캡처링은 버블링과 반대로 위에서 아래로 이벤트가 전파되는 것을 뜻한다.
이벤트를 등록할 때 파라미터를 두개만 쓰면 캡처링은 되지 않는다. 세번째 파라미터로 true 혹은 capture: true를 넣으면 캡처링이 작동한다. (false가 default값이다.)

---

이벤트 객체의 프로퍼티들

• event.target – 이벤트가 발생한 가장 안쪽의 요소 (유저가 실제로 누른 곳이 되기도 한다)
• event.currentTarget (=this) – 이벤트를 핸들링 하는 현재 요소 (핸들러가 실제 할당된 요소)
• event.eventPhase – 현재 이벤트 흐름 단계(캡처링=1, 타깃=2, 버블링=3)

---

완벽하게 정리되어있던 참고 사이트 : https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/stoppropagation-vs-stopimmediatepropagation-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-75edaaed7841

stopPropagation vs stopImmediatePropagation 제대로 이해하기

완벽하게 정리되어있던 참고 사이트 2 : https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

---

출처 : 코딩애플 https://codingapple.com/ / MDN https://developer.mozilla.org/ko/