서론
웹 개발을 하는 사람이라면 버블링와 캡쳐링에 대해서 한번쯤은 들어보았을 것이다. 프로젝트를 진행하면서 애매모호했던 프론트엔드 지식들을 구체화시키고자 오늘의 포스팅은 `버블링과 캡쳐링` 이라는 주제로 포스팅을 해보려고 한다.
버블링이란
특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다. 첫 이벤트가 발생했을 때 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가지는데, 이를 이벤트 버블링이라고 한다.
버블링의 원리
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작을 한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.
버블링을 막는 방법은 없을까?
이벤트 버블링은 타깃 이벤트에서 시작하여 <html> 요소를 거쳐 <document> 객체를 만날 때까지 각 노드에서 모두 발생한다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 하는데, 이 때도 마찬가지로 모든 핸들러가 호출된다. 이때 핸들러에게 이벤트를 원전히 처리하고 난 후 버블링을 중단하도록 명령을 할 수가 있는데, 이때 이벤트 객체의 메소드인 `event.stopPropagation()`을 사용하면 된다.
위의 내용은 버블링을 막을 떄의 문제점을 명시해주고 있다, 사실 나조차도 프로젝트를 진행하면서 이벤트 버블링을 막고자 했던 순간이 그다지 별로 없었기 때문에 참고삼아 읽고 넘어갔다. 혹여나 유용한 정보로써 작용을 할까봐 포스팅에 참고자료로 넣어놓았다.
캡쳐링이란
이벤트 버블링과 반대로 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달한다. 문서에 따르면 캡쳐링 흐름이 존재는 하지만 실제 코드에서는 자주 쓰이지 않는 경우라고 한다. 캡쳐링이 어떤 의미인지, 또 어떤 원리로 동작하는지에 대해서만 가볍게 훏고 넘어가자.
캡쳐링의 원리
하위 요소에서 이벤트가 시작되면, 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다 (버블링 단계) 이런 과정을 통해 요소에 할당된 이벤트 핸들러가 호출이 된다.
보통의 핸들러는 캡처링에 대해 전혀 알 수가 없다, 그렇기 때문에 캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture 옵션을 true로 설정을 해줘야한다.
elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 됩니다.
elem.addEventListener(..., true)결론
버블링이란?
특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성
캡쳐링이란?
이벤트 버블링과 반대 개념, 특정 화면 요소에서 이벤트가 발생했을 때 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달하는 특성
참고 자료
https://ko.javascript.info/bubbling-and-capturing
버블링과 캡처링
ko.javascript.info
https://sangjuntech.tistory.com/22
Event bubbling, 이벤트 버블링이란?
안녕하세요 박상준입니다. 오늘은 이벤트 버블링에 대해 공부해보는 시간입니다! 🤔 What is the event bubbling? 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의
sangjuntech.tistory.com
[JavaScript] 이벤트 버블링, 캡쳐링, 위임
프론트엔드 면접을 볼 당시에 이벤트 버블링, 캡쳐링에 대한 질문을 받았었는데 대답을 제대로 하지 못해 면접을 시원하게 말아먹었던 기억이 생각나 작성하는 포스팅... 다신 볼 일없게 꼼꼼하
velog.io
'개발적인 > 웹 개발' 카테고리의 다른 글
| 자바스크립트 new Date 객체의 크로스 브라우징 문제 (0) | 2023.02.17 |
|---|---|
| TypeScript useRef "Object is possibly null" error? (0) | 2023.02.17 |
| 기존 React 프로젝트에 TypeScript 적용하기 (0) | 2022.12.29 |
| [React] UI 라이브러리 (0) | 2022.12.26 |
| 템플릿 리터럴 (Template literals) 이란? (0) | 2022.12.19 |
댓글