어떤 요소에 이벤트가 발생하면, 그 이벤트의 흐름을 세 단계로 나눌 수 있다.
1. 캡처링: 이벤트가 하위 요소로 전파되는 단계
2. 타겟요소: 이벤트가 실제 발생하는 가장 하위요소 (자주 사용하는 e.target)
3. 버블링: 이벤트가 상위 요소로 전파되는 단계
해당 이벤트에 대한 이벤트핸들러를 특정요소에 할당하면 버블링에 의해
타겟요소 뿐 아니라 최상위 조상요소까지 순차적으로 할당된 이벤트핸들러가 동작한다.
그래서 e.target은 이벤트가 발생된 최하위요소 / e.currentTarget은 이벤트핸들러가 할당된 요소라는 차이가 있다.
버블링을 차단하기 위해서는 event.stopPropagation()이라는 메서드를 사용할 수 있지만,
꼭 필요한 경우가 아니라면 버블링을 막는 것은 권장되지 않는다.
캡처링은 버블링과 반대로 최상위요소에서 타겟요소의 순서로 이벤트핸들러가 동작하는 흐름이다.
캡처링 단계에서 이벤트핸들러를 호출하기 위해서는 addEventListener의 capture옵션을 true로 설정해야 한다.
이벤트핸들러는 기본적으로 버블링 단계에서 호출되도록 되어 있다. (capture: false)
https://ko.javascript.info/bubbling-and-capturing
'Today I Learned' 카테고리의 다른 글
| 첫 면접 (0) | 2022.06.22 |
|---|---|
| React, Angular, Vue의 차이 (0) | 2022.06.14 |
| 리액트에서 s3에 이미지 업로드하기 (0) | 2022.04.11 |
| promise와 then / async와 await (0) | 2022.04.03 |
| 안전연산자: ?. (3) | 2022.03.27 |