브라우저는 이벤트를 감지할 때, 그 이벤트를 최상위 요소까지 전파시킨다.
아래에서 말하는 버블링은 각 태그마다 이벤트가 등록되어있고, 이 이벤트를 상위요소로 전달하는 현상을 뜻한다.
addEventListener
옵션객체에 capture:true
를 하면 됨.
이벤트 전파를 막는 e.stopPropagation
버블링 : 클릭요소 이벤트 발생
캡쳐링 : 최상위 이벤트만 발생
예를들어 투두리스트에서 현재 작성된 각 아이템마다 이벤트를 달아주었다. (2개)
여기서 사용자가 투두를 늘렸다.
그럼 이때 생긴 투두는 이벤트등록이 안되어있다. 이런 문제를 해결하기 위해 투두를 감싸는 래퍼에 이벤트를 주어 이벤트 위임을 한다.
래퍼에 리스너를 달고 하위에서 발생한 클릭을 감지한다 === 이벤트버블링