ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 이벤트 전파 흐름 파악하기
    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

    댓글

Designed by Tistory.