이벤트 흐름: 버블링 및 캡처

프론트엔드 인터뷰 질문 시리즈 7번 포스팅입니다. 준비 수준을 높이고 전반적인 최신 정보를 얻으려면 Frontend Camp에 참여해 보세요.

---

이벤트 버블링과 캡처는 모두 DOM(Document Object Model)의 전파 메커니즘입니다. 이 두 메커니즘은 서로 반대입니다.

이벤트 버블링

이벤트 버블링에서는 이벤트가 대상 요소(event.target)에서 핸들러를 트리거한 후 문서의 루트 요소로 위쪽으로 전파(버블)됩니다. 도중에 상위 요소의 모든 이벤트 핸들러를 트리거합니다.

/*
<div>



<p>In the snippet above, when you click the button you'll see the following output in console:<br>
</p>

<pre class="brush:php;toolbar:false">"Button handler"
"Container handler"

먼저 버튼의 핸들러가 호출되고 이벤트가 시작될 때 event.target 속성이 버튼으로 설정됩니다. 루트 요소까지 진행되는 이벤트는 상위 요소의 이벤트 핸들러를 호출합니다.

거의 모든 이벤트가 버블링되지만 포커스 이벤트와 같이 버블링되지 않는 몇 가지 예외가 있습니다.

이벤트에서 stopPropagation() 메서드를 호출하면 버블링을 중지할 수 있습니다. 위 스니펫의 버튼 이벤트 핸들러가 전파를 중지하면 컨테이너의 이벤트 핸들러가 호출되지 않습니다.

btn.addEventListener('click', function(event) {
  console.log('Button handler!');

  // ancestor elements won't receive the event
  event.stopPropagation();
});

target.event 속성에 접근하면 이벤트를 시작한 요소에 접근할 수 있습니다. 또한, 핸들러가 실행 중인 요소는 event.currentTarget을 사용하여 접근할 수 있습니다.

container.addEventListener('click', function(event) {
  console.log('Container handler!'); // 'Container handler!'
  console.log(event.target); // btn
  console.log(event.currentTarget); // container
  console.log(this); // container
});

이 키워드에 대해 더 자세히 알고 싶으신가요? 이에 글을 올렸습니다.

이벤트 캡처

지금까지 사진의 절반만 보았습니다. 위 스니펫의 버튼을 클릭하면 해당 이벤트를 수신하는 첫 번째 요소가 아닙니다. ?

이벤트 흐름은 세 단계로 구성됩니다.

1. 캡처 단계: 이벤트는 루트 요소에서 대상 요소로 흐릅니다.
2. 대상 단계: 대상 요소에서 이벤트가 수신됩니다.
3. 버블링 단계: 이벤트가 루트 요소로 다시 전파되기 시작합니다.

기본적으로 모든 이벤트 핸들러는 대상 및 버블링 단계에서만 호출됩니다. 캡처 단계에서 이벤트 핸들러를 호출하려면 세 번째 인수로 true를 전달합니다.

el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });

캡처 단계에서 핸들러를 사용하는 경우 버블링 단계에서는 호출되지 않습니다.

버블링과 유사하게 캡처 단계에서 event.stopPropagation()이 호출되면 이벤트 흐름이 더 이상 진행되지 않습니다(이 경우 DOM 아래로).

앞서 논의한 스니펫에서 캡처 단계 중에 컨테이너가 전파를 중지하면 버튼 핸들러가 호출되지 않습니다.

/*
<div>



<p>이것이 항상 event.stopPropagation()을 사용해야 하는 타당한 이유가 있어야 하는 이유입니다. 복잡하거나 깊게 중첩된 DOM 트리에서는 디버그하기 어려운 예상치 못한 문제가 발생할 수 있습니다.</p><p>이벤트 캡처는 버블링에 비해 거의 사용되지 않습니다. 버블링에는 중요한 성능 패턴인 "이벤트 위임"과 같은 많은 사용 사례가 있습니다.</p>

<p>이 게시물은 다음 주제인 이벤트 위임에 대한 기반을 마련합니다. 잘 이해해 보시기 바랍니다. 의심이 듭니까? 댓글에 남겨주세요. ✌️</p>


<hr>

<h2>
  
  
  요약
</h2>

<ol>
<li>이벤트 흐름은 캡처, 대상 및 버블링 단계의 세 단계로 구성됩니다.</li>
<li>캡처 단계에서는 이벤트가 루트 요소에서 타겟(event.target) 요소로 흘러갑니다.</li>
<li>버블링 단계에서는 이벤트가 대상 요소에서 루트 요소로 흐릅니다.</li>
<li>기본적으로 모든 이벤트 핸들러는 대상 및 버블링 단계에서만 호출됩니다.</li>
<li>addEventListener 함수에 세 번째 인수를 전달하면 캡처 단계에서 핸들러를 설정할 수 있습니다.</li>
<li>이벤트 흐름의 어느 시점에서든 event.stopPropagation()을 호출하면 이벤트 흐름이 더 이상 진행되지 않습니다.</li>
</ol>


<hr>

<p>방금 읽은 내용이 마음에 드시나요? ? 프런트엔드 캠프의 대기자 명단에 등록해 보세요.</p>

<p>"?"라는 반응을 남겨주세요. 그리고 댓글을 달아 이 게시물이 당신과 같은 다른 개발자들에게 도움이 되도록 하세요. ?</p>


          

            
  

            
        

위 내용은 이벤트 흐름: 버블링 및 캡처의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!