이벤트 전파, 버블링 & 캡쳐링

이벤트 전파(Event Phase)

span 태그에 클릭 이벤트가 발생하면 위 그림처럼 이벤트의 흐름은 최상위 부모부터 타겟요소까지 이벤트가 타고 올라가서 span태그에 이벤트가 실행이 되고 다시 부모요소를 타고 내려가면서 버블링이 발생한다. 

 addEventListener은 기본적으로 버블링으로 작동하게 되는데 3번째 인자로 불리언값을 true를 주게되면 캡쳐링으로 작동하게 된다.

이렇게 해서 span태그를 클릭하면 나머지 태그들에도 클릭 이벤트가 발생한다.

 

이벤트전파를 막고싶을때

event객체에서 stopPropagation이라는 메서드를 이용

이렇게 하면 호출한 span태그 이후로는 이벤트가 발생이 안되는걸 알 수 있다.