이벤트 버블링
- 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다.
- 여기서 상위요소란 HTML 트리구조상 위에있는 요소를 말한다.
- 브라우저는 이벤트를 감지할때의 특성이 있다. 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.
- 이같은 하위에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링이라고 한다.
이벤트 캡쳐
- 이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.
- addEventListener() 옵션에 capture:true를 성정해주면 된다. 그러면 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색한다.
event.stopPropagation()
- 이 웹 api는 해당 이벤트가 전파 되는것을 막는다.
- 따라서 이벤트 버블링의 경우에선 클릭한 요소의 이벤트만 발생시키고 상위요소로 이벤트 전달은 막는다.
- 이벤트 캡쳐의 경우 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달시키지 않는다.
이벤트 위임(Event Delegation)
- 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식이다.
- 리스트 아이템이 많아지면 이벤트 리스너를 모두 달아주는 작업 자체가 번거롭다. 이걸 해결해줄 수 있는 방법이 바로 이벤트 위임이다.
- 모든 엘리먼트에 일일이 이벤트 리스너를 추가하는 대신 상위 요소 태그에 이벤트를 위임해주는 것이다. 이벤트 버블링을 이용하는 것이다.
참고
기록하는 습관