이벤트 버블링과 이벤트 위임의 개념과 기능

JS 이벤트 버블링과 이벤트 위임이란 무엇인가요? 구체적인 코드 예제가 필요합니다

이벤트 버블링(Event Bubbling)과 이벤트 위임(Event Delegation)은 JS에서 이벤트 처리와 관련된 두 가지 중요한 개념입니다. 이 기사에서는 두 개념을 자세히 소개하고 구체적인 코드 예제를 제공하여 사용 및 구현 원칙을 설명합니다.

1. 이벤트 버블링

이벤트 버블링은 요소에서 이벤트(예: 클릭 이벤트)가 발생할 때 요소가 이벤트 핸들러를 정의하면 이벤트가 먼저 트리거된 다음 이벤트가 요소에서 전파되는 것을 의미합니다. 현재 요소를 문서의 루트 요소에 도달할 때까지 수준별로 상위 요소로 이동합니다.

이벤트 버블링 메커니즘을 사용하면 각 하위 요소에 대해 별도의 이벤트 핸들러를 정의할 필요 없이 상위 요소의 여러 하위 요소에 동일한 이벤트 핸들러를 쉽게 추가할 수 있습니다. 이렇게 하면 코드가 단순화되고 유지 관리가 더 쉬워집니다.

다음은 이벤트 버블링의 코드 예입니다.

HTML 코드:

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>

JS 코드:

const parent = document.querySelector('#parent');
const child1 = document.querySelector('#child1');
const child2 = document.querySelector('#child2');

parent.addEventListener('click', function(event) {
  console.log('触发父元素的点击事件');
});

child1.addEventListener('click', function(event) {
  console.log('触发子元素1的点击事件');
  event.stopPropagation();
});

child2.addEventListener('click', function(event) {
  console.log('触发子元素2的点击事件');
  event.stopPropagation();
});

위 코드에서 하위 요소 1 또는 하위 요소 2를 클릭하면 콘솔이 차례로 출력합니다.

触发子元素1的点击事件
触发父元素的点击事件

상위 요소의 이벤트 핸들러는 이벤트가 상위 요소에 버블링될 때만 실행됩니다. event.stopPropagation()에 전화하여 이벤트가 터지는 것을 중지하세요.

2. 이벤트 위임

이벤트 위임이란 이벤트 핸들러를 상위 요소에 바인딩하고 이벤트의 원래 대상(event.target)을 판단하여 해당 작업을 수행할지 여부를 결정하는 것을 말합니다.

이벤트 위임의 장점은 새 하위 요소가 상위 요소에 추가될 때 이벤트 핸들러를 새 하위 요소에 별도로 바인딩할 필요가 없고 이벤트가 상위 요소를 통해 직접 처리된다는 것입니다. 이렇게 하면 이벤트 처리기 수를 크게 줄이고 성능을 향상할 수 있습니다.

다음은 이벤트 위임의 코드 예입니다.

HTML 코드:

<ul id="parent">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

JS 코드:

const parent = document.querySelector('#parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const textContent = event.target.textContent;
    console.log('点击了项目：' + textContent);
  }
});

위 코드에서 li 요소를 클릭하면 클릭한 항목 내용의 텍스트가 콘솔에 출력됩니다. . 이후에 몇 개의 li 요소가 추가되더라도 해당 클릭 이벤트는 상위 요소에 의해 처리됩니다.

이벤트 위임의 원리는 이벤트 버블링을 통해 구현됩니다. 이벤트는 먼저 부모 요소까지 버블링된 다음 이벤트의 원래 대상을 기준으로 판단되어 해당 작업을 수행해야 하는지 여부를 결정합니다.

요약:

이벤트 버블링과 이벤트 위임은 JS의 이벤트 처리와 관련된 중요한 개념입니다. 이벤트 버블링을 사용하면 동일한 이벤트 핸들러를 상위 요소의 여러 하위 요소에 쉽게 추가할 수 있으므로 코드 재사용성이 향상됩니다. 이벤트 위임은 이벤트의 원래 대상을 기반으로 이벤트 핸들러를 상위 요소에 바인딩합니다. 해당 작업을 수행하고 성능을 향상시키며 코드 양을 줄입니다. 실제 개발에서는 필요에 따라 이벤트 버블링과 이벤트 위임을 적절하게 사용한다면 우아하고 효율적인 코드를 작성할 수 있습니다.

위 내용은 이벤트 버블링과 이벤트 위임의 개념과 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!