이벤트 버블링과 캡쳐링에 대해서 알아보자

오늘은 블로그 주제를 찾아서 돌아다니다 이벤트 버블링과 캡쳐링에 대한 글을 읽게 되어서

이렇게 정리하기 위해 글을 써보게 되었습니다

---

이벤트에 대해서

이벤트란 마우스 클릭이나 키보드 입력과 같은 일반적으로 사용자가 행하는 모든 행동을 말합니다

이러한 이벤트를 원하는대로 처리하는 것을 이벤트 핸들링이라고 합니다 

 

HTML문서를 보면 모든 엘리먼트들이 계층적인 구조로 이루어져 있습니다

그래서 요소에서 이벤트가 발생할 경우 연쇄적으로 이벤트가 발생할 수 있습니다

예를 들어서 이해하기 쉽게 설명하자면 

 <form onclick="console.log("클릭 당함")">
  <div onclick="console.log("클릭 당함")">
    <span onclick="console.log("클릭 당함")">내용</span>
  </div>
</form>

저렇게 3개로 중첩 되어 있어서 제일 안 쪽에 위치하는 span 태그를 클릭할 시 그의 부모 요소인 div와 form 엘리먼트에도 이벤트가 발생할 수 있습니다 

이러한 현상을 이벤트 전파라고 부른다고 합니다 그리고 전파의 방향에 따라서 버블링과 캡쳐링을 구분합니다

---

🫧 버블링

 

이벤트 버블링이란 자식요소에서 부모요소로의 이벤트 전파 방식입니다

가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다

이벤트가 제일 깊은 곳에서 시작해 올라오는 것이 마치 물속 거품같다고 하여서 버블링이라고 합니다

거의 모든 이벤트는 버블링이 된다고 합니다

위 예시로 보면 버블링은 span, div, form 순서로 이벤트가 전달됩니다

 

만약 버블링을 중단하고 싶다면 간단하게 event.stopPropagation() 코드를 추가해주면 예방할 수 있습니다

하지만 버블링을 중단 시키고 싶으면 꼭 중단해야하는지 잘 판단하여 중단시키는 것이 좋다고 합니다

---

📷 캡쳐링

이벤트 캡쳐링이란 버블링의 반대로 부모요소에서 자식요소로 이벤트를 전파하는 방식을 말합니다

캡쳐링 하는 법은 밑에 코드를 보면 됩니다

example.addEventListener("click", (e) => {
  console.log('캡쳐캡쳐링');
}, true)

이렇게 3번째 인자 값인 capture를 true로 해서 활성화 해주면 캡쳐링이 되게 됩니다

저 위에 예시로 또 보자면 캡쳐링은 form, div, span 순서로 이벤트가 전달됩니다

---

글을 마치며

솔직히 저는 버블링 캡쳐링 글을 읽기 전에는 이벤트에 대해서 그렇게 깊게 생각해본 적이 없었는데 이렇게 글을 막상 읽고 쓰게 되니 좋았던거 같고 몰랐던 새로운 이론을 배워서 좋았던거 같습니다 글 읽어주셔서 감사합니다