이벤트 버블링 및 캡처 - 5세처럼 배우세요

자, '5살처럼 배우세요'는 단지 문구일 뿐입니다. 여기서는 장난감 이야기를 하는 것이 아닙니다! 하지만 처음부터 끝까지 주의 깊게 읽어보시면 모든 내용이 이해가 될 것이라고 약속드립니다.

이벤트 버블링 및 캡처는 JavaScript에서 이벤트가 트리거될 때 DOM(문서 개체 모델)을 통해 이벤트가 전파(또는 이동)되는 두 단계입니다. 이제 이 진술은 이벤트 전파의 개념을 명확하게 해야 합니다.

이벤트 전파

div 내부의 버튼과 같은 요소에서 이벤트가 발생하면 해당 버튼에서만 이벤트가 발생하지 않습니다. 이벤트는 이벤트 전파라는 프로세스를 통해 DOM을 통해 이동합니다. 이 프로세스는 두 가지 주요 단계로 진행됩니다.

• 이벤트 캡처("살수"라고도 함)

• 이벤트 버블링

이제 아이디어를 얻으셨기를 바랍니다. 예를 들어 두 가지를 모두 이해해 봅시다.

이벤트 버블링

이벤트 버블링은 요소에서 이벤트가 발생할 때 먼저 해당 요소에 대한 이벤트 핸들러를 트리거하는 것을 의미합니다. 그런 다음 DOM 트리에서 위쪽으로 이동하여 상위 요소의 이벤트 핸들러 등을 트리거하여 문서나 DOM 트리의 루트에 도달할 때까지 계속합니다.

<div id="parent" style="padding: 20px; background-color: lightblue;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    alert('Button Clicked!');
    // event.stopPropagation(); // If you want to stop bubbling, uncomment this line
  });
</script>

예시설명: 버튼을 클릭하면 "버튼클릭!" 이벤트가 버튼에서 트리거되기 때문에 경고가 먼저 표시됩니다. 그 후, 이벤트가 상위 div까지 "버블링"되고 "상위 Div 클릭!"이 표시됩니다. 알리다. 이는 이벤트가 버튼에서 시작된 다음 상위 div로 이동하기 때문입니다. 그래서 이런 전파 과정을 '이벤트 버블링'이라고 합니다.

이벤트 캡처

이벤트 캡처는 버블링의 반대입니다. 이벤트는 웹페이지 상단(문서부터 시작)에서 시작하여 상호작용한 요소를 향해 아래로 이동합니다. 이는 상위 요소에 대한 이벤트 핸들러가 먼저 트리거되고 이벤트가 클릭했거나 상호작용한 하위 요소로 이동한다는 의미입니다.

<div id="parent" style="padding: 20px; background-color: lightgreen;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  }, true); // 'true' makes this event handler run during the capturing phase

  document.getElementById('child').addEventListener('click', function() {
    alert('Button Clicked!');
  });
</script>

이 경우 버튼을 클릭하면 "상위 Div가 클릭되었습니다!" 경고가 먼저 표시됩니다. 그런 다음 "버튼을 클릭했습니다!" 이벤트가 문서 수준에서 시작하여 먼저 상위 div까지 캡처(물방울)한 다음 버튼에 도달하기 때문에 경고가 표시됩니다.

addEventListener의 세 번째 인수의 true 값이 캡처 단계를 결정합니다.

모든 이벤트는 3단계를 거칩니다.

당연히 모든 이벤트는 세 단계를 모두 거칩니다.

• 캡처 단계: 이벤트는 상단(문서)에서 시작하여 대상까지 이동합니다.

• 목표 단계: 이벤트가 상호작용한 요소(대상)에 도달합니다.

• 버블링 단계: 목표에 도달한 후 이벤트 버블이 상위 요소를 통해 다시 시작됩니다.

그렇습니다. 이벤트는 자연스럽게 세 단계를 모두 거치지만 JavaScript를 사용하면 이벤트 리스너가 어떤 단계에서 작동할지 제어할 수 있습니다.

이벤트가 세 단계를 모두 거치더라도 JavaScript의 이벤트 리스너는 기본적으로 버블링 단계에 연결됩니다. 즉, 아무것도 지정하지 않고 이벤트 리스너를 추가하면 버블링 단계에서만 이벤트를 수신합니다(이벤트가 목표에 도달하고 위로 이동하기 시작한 후).

세 번째 인수로 true를 전달하면 캡처 단계 중(DOM을 따라 이동하는 동안) 이벤트를 수신하도록 JavaScript에 지시합니다. 이벤트는 여전히 모든 단계(캡처, 대상 및 버블링)를 거치지만 이벤트가 대상 요소에 도달하기 전인 캡처 단계 중에 리스너가 트리거됩니다.

true를 사용하면 이벤트가 캡처에서 버블링으로 진행되나요? 아니요, 이벤트는 항상 캡처와 버블링을 통해 진행됩니다. true를 전달하면 버블링 단계가 방지되지 않습니다. 캡처하는 동안 청취자에게 응답하라고 지시하는 것뿐입니다. 이벤트는 평소대로 포획부터 대상까지 버블링을 계속합니다.

요약:

• 모든 이벤트는 자연스럽게 캡쳐, 타겟, 버블링 단계를 거치게 됩니다.

• 기본적으로 이벤트 리스너는 버블링 단계에서 작동합니다(이벤트가 목표에 도달하고 위로 이동한 후).

• true를 전달하면 이벤트 리스너에게 캡처 단계 중(이벤트가 아래쪽으로 이동함에 따라) 트리거하도록 지시하는 것입니다.

• The event still goes through all phases (capturing, target, and bubbling), but your listener decides in which phase to act.

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