개발 입문한지 얼마 안됐을 때 분명 child element를 클릭했는데 parent element의 event까지 발생해서 한참헤매고 stopPropagation이라는 이해할 수 없지만, 일단 넣으라고하는 코드를 넣어서 이해하지 못하고 일단 해결했던 기억이 난다.
그리고 바닐라 자바스크립트로 개발하던 때가 있었다. 여행계획 서비스였는데 여행지를 검색하고 내 일정에 추가하면 일정에 li element가 추가된다.
문제는 li element에 해당 장소로 이동할 수 있는 비행기 모양 아이콘이 있었는데 li element가 추가될 때마다 onclick 이벤트도 매번 새로 생긴 li element에 추가했던 것이다.
지금 돌아보면 이벤트 위임으로 상위 ul에만 이벤트를 등록해두었으면 매번 li element에 이벤트를 추가하지 않았어도 될 일이었는데, 그땐 모르고 알려줄 사수도 없다보니 그렇게 넘어갔었다.
개인적인 이야기는 여기까지이고
이벤트 버블, 캡처, 위임에 대해서 알아보자.
Event bubble(이벤트 버블)
물 속에서 거품이 발생하면 어떻게되는가?
거품이 점점 수면으로 올라간다.
물 속의 거품처럼 이벤트가 상위 element로 올라가며 핸들러를 찾아 동작시키는 것을 의미한다. 버블링은 더 이상 부모요소가 없을때까지 반복된다.
이벤트 버블을 막는법
나의 옛날 이야기에도 적었지만 event.stopPropagation()을 추가해주면 지금 실행되는 핸들러만 실행되고 더 이상 상위로 전파되지 않는다.
또 stopImmediatePropagation도 있는데 한 요소가 여러개의 이벤트 핸들러가 있을 때, 현재 실행중인 이벤트 핸들러만 실행하고 다른 이벤트 핸들러는 실행되지 않도록 하는 것이다.
Event capture(이벤트 캡처)
버블링의 반대라 생각하면 된다.
위에서 아래로 내려온다.
JS는 기본적으로 버블링이 사용되기 때문에 캡처링은 본 적 없을 것이다.
캡처링을 주고 싶을 땐 아래처럼 함수 뒤에 true를 추가하면 된다.
이렇게하면 캡처링으로 상위에서 내려올 때 이벤트 핸들러가 동작하고 반대로 버블링으로 올라갈 때는 동작하지 않는다.
dom.addEventListener(function(){},true)만약 캡처링, 버블링 모두 동작시키고 싶으면 아래와 같이 둘다 작성하면된다.
dom.addEventListener(function(){},true);
dom.addEventListener(function(){});Event delegation(이벤트 위임)
처음 언급했던 내 사례에서 볼 수 있듯이 각 하위 요소에서 이벤트 핸들러를 매번 설정해주는 것이 아닌, 부모 요소에 하나의 이벤트 핸들러를 설정해 유지보수가 용이하도록 하는 것이다.
이벤트 버블링과, 캡처링이 있기 때문에 위임이 가능한 것인데, 어떤 하위 요소에서 이벤트가 발생했는지 구분하기 위해서 event의 target이라는 프로퍼티를 사용한다.
event.target , currentTarget
event에는 여러 프로퍼티가 있지만 여기서 target, currentTarget에 대해서 이야기해보자
먼저 target은 현재 이벤트가 발생한 요소
currentTarget은 이벤트 핸들러가 붙어있는 요소로 위임에서는 target을 이용해서 처리할 것 이다.
