JavaScript로 이벤트 버블링 및 캡처 마스터하기

JavaScript의 이벤트 버블링 및 캡처

JavaScript의 이벤트 전파는 이벤트가 트리거된 후 DOM을 통해 흐르는 방식을 설명합니다. 이벤트 버블링과 이벤트 캡처의 두 가지 주요 단계가 있습니다. 이벤트 리스너를 효과적으로 관리하려면 이러한 개념을 이해하는 것이 중요합니다.

1. 이벤트 전파 단계

이벤트가 트리거되면 다음 순서로 DOM을 통해 전파됩니다.

1. 캡처 단계: 이벤트는 DOM 트리의 루트에서 대상 요소로 이동합니다.
2. 목표 단계: 이벤트가 목표 요소에 도달합니다.
3. 버블링 단계: 이벤트가 대상 요소에서 다시 루트로 이동합니다.

2. 이벤트 버블링

버블링 단계에서는 이벤트가 대상 요소에서 시작하여 상위 요소를 통해 버블링됩니다.

예:

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

버튼 클릭 시 출력:

Child clicked
Parent clicked

• 버튼부터 div까지 이벤트가 버블링됩니다.

버블링 중지

이벤트가 더 이상 전파되는 것을 방지하려면 stopPropagation() 메서드를 사용하세요.

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

3. 이벤트 캡처(살수)

캡처 단계에서 이벤트는 DOM 트리의 루트에서 대상 요소로 이동합니다.

예:

document.getElementById("parent").addEventListener(
  "click",
  function() {
    console.log("Parent clicked");
  },
  true // Enables capturing phase
);

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

버튼 클릭 시 출력:

Parent clicked
Child clicked

• 이벤트는 자식에게 도달하기 전에 부모가 캡처합니다.

4. 버블링과 캡쳐 비교

5. 행사위임

이벤트 위임은 이벤트 버블링을 활용하여 여러 하위 요소에 대한 이벤트를 효율적으로 처리합니다.

예:

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

• ul의 단일 이벤트 리스너는 모든 li 요소에 대한 클릭을 처리합니다.

6. 기본 동작 방지

전파에 영향을 주지 않고 요소의 기본 동작을 중지하려면 PreventDefault() 메서드를 사용하세요.

예:

Child clicked
Parent clicked

7. 실제 사용 사례: 양식 유효성 검사

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

8. 요약

• 이벤트 버블링은 대상 요소의 이벤트를 상위 요소로 전파합니다.
• 이벤트 캡처는 루트부터 대상 요소까지 이벤트를 전파합니다.
• 전파를 중지하려면 stopPropagation()을 사용하고 기본 작업을 취소하려면 PreventDefault()를 사용하세요.
• 이벤트 위임은 동적 요소에서 이벤트를 효율적으로 관리하기 위한 강력한 기술입니다.

이벤트 버블링 및 캡처를 마스터하면 이벤트 기반 애플리케이션을 더 효과적으로 제어하고 코드 효율성을 높일 수 있습니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

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