이벤트 버블링에 대해서 (이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임)

오늘은 이벤트 버블링에 대해서 공부한 내용을 적어보려고 한다.

이벤트 캡처링

이벤트 캡처링은 버블링과 반대로 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달한다.

처음 js를 학습할 때 addEventListener메소드와 를 접했던 적이 있다. 이 메소드는 이벤트 캡처링을 위한 메소드이다.

출처 : https://velog.io/@tlatjdgh3778/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A0%95%EB%A6%AC

이벤트 버블링

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

출처 : https://velog.io/@tlatjdgh3778/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A0%95%EB%A6%AC

버블링은 해당 타깃에서 최상위 객체를 만날 때까지 핸들러가 모두 호출되는데, 원하는 타깃에서만 이벤트를 발생시키고 싶을 수가 있다. 그때 event.stopPropagation 메소드를 이용하면 상위요소로 이벤트가 전파되는 것을 막을 수 있다.

하지만 추후에 문제가 발생할 수 있으니 버블링을 꼭 멈춰야 하는 상황이 아니면 될 수 있으면 버블링을 막지 않는 것이 좋다.

이벤트 위임

하위 요소에 이벤트를 붙이지 않고 상위 요소에 이벤트 리스너를 추가해 하위 요소의 이벤트들을 제어하는 방식으로 이벤트 버블링을 활용할 수 있습니다.

이러한 이벤트 위임을 적용시키면 각각 적용하는 것에 비해 하나의 핸들러만 필요하기 때문에 메모리 사용이 줄어들고 제거된 요소에서 핸들러를 해제하고 새 요소에 대해 이벤트를 바인딩 할 필요가 없다는 장점이 있습니다.

---

Q. 이벤트 버블링에 대해서 설명해주세요

A.
이벤트 버블링은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후, 상위요소로 이벤트가 전파되는 현상을 말합니다.
이벤트 캡처링은 이벤트가 처리된 후 하위요소로 간다는 점에서 버블링과 차이점이 존재합니다.
이벤트 버블링은 이벤트가 전파되는 동안 부모 요소에서도 이벤트를 감지할 수 있다는 장점이 있습니다.
즉 이벤트를 처리하는 핸들러 함수를 부모 요소에 등록해 놓으면, 자식 요소에서 발생한 이벤트로 감지할 수 있다는 장점이 있습니다. 이를 이벤트 위임이라고 합니다