이벤트 버블링과 캡쳐링
이벤트(event)
이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
대표적인 이벤트 타입으로는 click, blur, focus 등이 있다.
이벤트의 흐름
HTML 요소에 이벤트가 발생하였을 때 연쇄적 반응이 일어난다.
전파 방향에 따라 버블링과 캡쳐링으로 구분할 수 있다.
이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려간다.
버블링(Bubbling)
자식 요소에서 발생한 이벤트는 부모를 통해 전달되는데, 즉 하위요소에서 상위요소에서 올라간다.
이벤트가 거슬러 올라가는 현상이 마치 물속 거품(bubble)과 닮았기 때문에 버블링이라고 부른다.
엘리먼트에 이벤트가 발생하면 해당 엘리먼트에서 먼저 실행 한 후, 부모 이벤트도 실행하고 그 위 부모들까지도 이벤트를 실행한다.
캡쳐링(Capturing)
이벤트 버블링과는 반대 방향으로 전달되는 방식이다.
이 캡쳐링이 있으므로 부모에 이벤트를 걸어도 타깃이 된 자식에서 이벤트가 발생 될 수 있다.
캡쳐링을 잡아야 하는 경우는 흔치 않지만
addEventListener의 세 번째 요소의 기본값이 false이기 때문에 capture: true로 변경해주어야 한다. false에선 캡쳐링을 잡을 수 없다.
event.target 과 event.currentTarget의 차이점
event.target은 이벤트가 발생한 요소
event.currentTarget은 이벤트가 실제 할당된 요소이다
이벤트 위임을 사용하지 않으면 target과 currentTarget은 동일하다.
이벤트 위임
이벤트가 캡쳐링,버블링되는 것을 이용하여 이벤트 위임을 할 수 있다.
상위 요소에 이벤트를 핸들링한 후 자식 요소에서 이벤트가 발생하여도 이벤트가 작동하는 것을 알 수 있다.
이것으로 불필요한 코드를 줄일 수 있으며, 많은 엘리먼트에 이벤트를 직접 제어하지 않아도 된다.
