반응형
버블링
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
캡처링
표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다.
1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계
event.stopPropagation() : 버블링 및 캡처링 중단할 때 사용하는 함수
Ex)
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
<button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>반응형
'WEB > JavaScript' 카테고리의 다른 글
| [JS] 쿠키 (0) | 2023.10.29 |
|---|---|
| [JS] 콘솔 (0) | 2023.10.29 |
| [JS] 이벤트(Event) (0) | 2023.10.28 |
| [JS] DOM : 크기와 좌표 (0) | 2023.10.28 |
| [JS] dom (0) | 2023.10.28 |