-
이벤트 전파 흐름 파악하기JavaScript/EventHandler 2022. 11. 12. 18:50
이벤트 흐름에는 3가지 단계
1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계( 가장 처음 이벤트 핸들러가 동작하게 되는 순간)
3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JS with Codeit</title> </head> <body> <div id="content"> <h1 id="title">오늘 할 일</h1> <ol id="list"> <li class="item">자바스크립트 공부</li> <li class="item">독서</li> </ol> </div> <script src="index.js"></script> </body> </html>캡쳐링 단계(Top-to-Bottom)
- window객체 -> document 객체 -> html태그 -> body태그 -> div태그 -> ol태그 -> li태그
버블링 단계(Bottom-to-Top)
- li 태그 -> ol태그 -> div태그 -> body태그 -> html태그 -> document 객체 -> window객체
프로세스(Process)
- 이벤트가 발생하면 가장 먼저 window 객체에서부터 target 까지 이벤트 전파가 일어납니다. (캡쳐링 단계)
- 그리고 나서 타깃에 도달하면 타깃에 등록된 이벤트 핸들러가 동작하고, (타깃 단계)
- 이후 다시 window 객체로 이벤트가 전파됩니다. (버블링 단계)
이런 과정을 통해 각 요소에 할당된 이벤트 핸들러가 호출로 이벤트가 전파- 보통 타깃 단계에서 target에 등록된 이벤트 핸들러가 있으면 해당 이벤트 핸들러가 먼저 동작한 이 후에 버블링 단계에서 각 부모 요소에 등록된 이벤트 핸들러가 있으면 그 때 해당 이벤트 핸들러가 동작하는 것이 일반적
- 하지만 상황에 따라서는 캡쳐링 단계에서 부모 요소의 이벤트 핸들러를 동작해야 한다
'JavaScript > EventHandler' 카테고리의 다른 글
이벤트 등록 & 이벤트 삭제 (0) 2022.11.10 이벤트(Events)란?! (0) 2022.11.06