이벤트 전달방식(버블링, 캡처링, 위임)

최재원·2022년 4월 26일

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다.

맨 아래인 자식요쇼의 div부터 => 상위 div => body로 거품처럼 위로 올라간다..라고 생각하자

상위의 화면 요소란? HTML 요소는 기본적으로 트리 구조를 갖는다.  
여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 하며  
body 태그를 최상위 요소라고 말한다.

이벤트 전달방식을 신경 쓰지 않고현재 요소의 이벤트만 신경 쓰고 싶으면 아래의 함수를 사용하면 된다.

해당 이벤트가 전파되는 것을 막는다. 클릭한 요소의 이벤트만 발생시키고 이벤트 버블링의 경우에는 상위요소로 이벤트를 전달하지 않고, 이벤트 캡처링의 경우에는 하위요소로 이벤트를 전달하지 않는다.

event.stopPropagation();

반대로 이벤트 캡처링은 위(최상위 요소)에서 아래(자식 요소)로 내려간다.

<ul>
  <li>노트북</li>
  <li>모니터</li>
  <li>책상</li>
  <li>의자</li>
  <li>키보드</li>
  <li>마우스</li>
</ul>

이렇게 되어있으면 ul 선택자를 변수에 저장하거나 li 선택자를 변수에 저장 할 수 있다.

li 선택자를 변수로 저장할 경우에는 li 선택자가 더 많아진다면 이벤트 리스너를 다는 작업이 번거롭고 메모리 사용량이 많아진다. 이를 해결하는게 이벤트 위임이다.

ul 선택자를 변수로 저장하여 하위요소인 li 선택시 상위요소 ul에서 이벤트를 제어할 수 있다.

https://github.com/jaewon1676