JavaScript의 이벤트 위임에 대한 기본 JS 및 jQuery 예제 코드 공유

아래 편집기는 JavaScript 이벤트 위임 예제(네이티브 js 및 jQuery 코드 포함)를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터를 따라 살펴보겠습니다

이벤트 위임의 원리는 이벤트 버블링에 의존합니다. 일련의 작업을 수행하기 위해 상위 요소에 대한 이벤트 위임을 통해 어떤 하위 요소가 이벤트를 트리거했는지 확인할 수 있습니다.

이벤트 위임 사용의 장점

1. 이벤트에 의해 트리거된 개체를 기반으로 해당 작업을 하나씩 수행할 필요가 없습니다. dom 구조는 다음과 같습니다.

<ul id = "oUl">
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li> 
 <li class = "item"></li>
</ul>

li를 클릭하면 li의 값이 인쇄됩니다.

이벤트 위임을 배우기 전에는 모든 li를 순회하고 다음과 같이 클릭 이벤트를 추가했습니다.

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) // 遍历li
 aLi[i].addEventListener(&#39;click&#39;, function() { //给每个li添加事件
 console.log(this.innerHTML); 
 });

이벤트 위임을 학습한 후 기본 js 코드는 다음과 같습니다.

var oUl = document.getElementById('oUl');
oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 触发事件的对象保存在事件的target里面
 console.log(tag.innerHTML);
})

jQuery 코드는 다음과 같습니다.

$('#oUl').on('click', '.item', function() { 
 console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})

반면에 이벤트 대리자는 상위 요소만 가져오면 되고 li를 순회할 필요가 없으므로 효율성이 많이 향상됩니다.

2. 이벤트를 상위 요소에 위임한 후 동적으로 생성된(삭제된) 하위 요소는 이벤트를 다시 바인딩(바인딩 해제)할 필요가 없으므로 요소와 이벤트의 동기 업데이트가 이루어집니다.

과거 js 이벤트에서 모니터링에는 js를 사용하여 동적으로 생성된 하위 요소에 대한 이벤트가 없으며 이벤트를 해당 요소에 다시 바인딩해야 합니다. 그러나 이벤트 위임을 사용하는 것은 이벤트를 다시 바인딩하지 않고도 여전히 번거롭게 구현할 수 있습니다. 물론 이벤트 바인딩도 이벤트 버블링에 의존하기 때문에 단점도 있습니다. 버블링을 지원하지 않으면 이벤트 바인딩을 구현할 수 없지만 아직은 그럴 가능성이 낮다고 생각합니다. 예를 들어, 페이지의 버튼1과 버튼2의 기능은 클릭 시 값이 팝업되는 반면, 버튼3의 기능은 클릭 시 페이지의 색상이 변경되는 것과 같습니다. 이 세 버튼의 이벤트는 서로 다릅니다. 클릭을 변경하면 이벤트가 공통 상위 요소에 위임되면 이벤트 오판이 발생합니다.

그래서 이벤트 위임은 하위 컬렉션의 이벤트 기능이 동일할 때 발생한다고 생각합니다. 만약 동일하지 않다면 자멸을 피하기 위해 이벤트 위임을 사용하지 마세요.

실제 개발에서 이벤트 바인딩을 마스터하면 코드의 표준화와 효율성이 향상됩니다. 일반적으로 장점이 단점보다 큽니다.

위 내용은 JavaScript의 이벤트 위임에 대한 기본 JS 및 jQuery 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!