버블링과는 반대로 최상위 요소에서 시작하여 발생한 요소로 내려가는 과정
addEventListener 함수의 세 번째 인자로 true를 설정함으로써 이벤트 캡처링을 활성화
(세번째 인자의 기본 값은 false로 이벤트 캡처링을 활성화 할건지 여부를 정한다.)
일반적이지 않으며 특별한 경우에 사용한다. ( 하위 요소의 이벤트 처리 방지)
DIV1 코드의 addEventListener 세번째 인자에 true로 설정한다.
그 다음 버튼을 클릭하면 버블링과 다르게 DIV1에 대한 alert만 뜨게 된다.
ex) 버튼을 클릭하면 button alert 대신 '로그인을 먼저 해주세요' 라는 alert이 먼저 뜨게 하고 싶다.
그럴때 button을 감싸고 있는 최상위 요소 div에 이벤트리스너를 추가하면서 세번째 인자에 true를 작성한다.
이제 버튼을 클릭하게 되면 '로그인을 먼저 해주세요' alert이 먼저 뜨게 된다.
이처럼 복잡한 상호작용이 있는 사용자 인터페이스에서 유용할 수 있다.
하지만 캡처링이 자주 사용되지 않는 이유는
- 복잡성 증가 - 이벤트 캡처링과 버블링 단계를 모두 고려해야 한다.
- 불필요한 사용 사례 - 대부분의 이벤트 처리는 이벤트 버블링만으로도 충분
- 이벤트 흐름의 예측 가능성 - 이벤트의 흐름이 덜 직관적이다.
- 특정 상황에 대한 이해 - 캡처링을 사용해야할 상황이 자주 발생하지 않고 대체할 수 있는 방법들이 많음
위 예제를 작성하면서 e.stopPropagation(); 을 사용하였는데
이벤트 발생 시 현재 요소에서 상위 요소로 전파되는 것을 방지하여 이벤트 버블링 및 캡처링을 중단한다.
하위 요소에서 이벤트 발생시 상위 요소의 이벤트 리스너에 영향을 주고 싶지 않을때 사용한다.
버튼을 클릭하면 그에 대한 alert만 발생할뿐 상위 요소에 대한 alert은 발생시키지 않음
이것과 비슷한 것으로 e.preventDefault가 있는데 이건 아예 고유 동작 자체를 중단 시킨다.
버튼을 클릭해도 alert이 뜨지 않는다.
이 외에 a 태그를 클릭했을때 블로그로 넘어가는 링크에도 preventDefault를 사용하면 페이지 이동이 되지 않는다.
또 submit 태그를 누르면 자동으로 새로고침이 되는데 새로고침을 방지할 수 있어 폼같은데에서 사용할 수 있다.
(submit을 누르면 폼데이터가 서버로 전송되고 새로고침이 진행되어 입력값 사라지기 때문)
하지만 이벤트의 전파를 중단하는 것은 아니다. 중단하려면 stopPropagation으로.
정리하자면
이벤트 캡처링은 하위요소에서 이벤트를 발생시켜도 버블링과 반대로 최상위 요소부터 하위 요소 순으로 이벤트 발생
잘 사용되지는 않음
e.preventDefault는 고유 동작을 중단시키고, e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.
