JavaScript 이벤트 위임 작업 방법
1438 단어 webdevjavascript
예를 들어, 상위 UL 요소 하나와 하위 요소 몇 개가 있다고 가정합니다.
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
현재 리 요소를 눌렀을 때 몇 가지 일을 해야 합니다. 그 중 하나는 이벤트 탐지기를 모든 리 요소에 추가하는 것입니다. 그러나 리 요소가 목록에 자주 추가되어 목록에서 삭제된다면?이벤트 탐지기를 추가하고 삭제하는 것은 악몽입니다. 특히 프로그램의 다른 위치에 코드를 추가하고 삭제할 때 악몽입니다.더 좋은 해결 방안은 부모UL 요소에 이벤트 탐지기를 추가하는 것이다.그러나 이벤트 탐지기를 부모에 추가하면 어떤 요소를 눌렀는지 어떻게 알 수 있습니까?
간단: 이벤트가UL 요소에 거품이 생겼을 때 이벤트 대상의 target 속성을 검사하여 실제 클릭한 노드에 대한 인용을 얻습니다.
Javascript 코드 세그먼트
// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
// List item found! Output the ID!
console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
}
});
활동 권한 수여의 배후 개념을 직관적으로 이해하고 권한 수여의 힘을 믿게 해줄 수 있기를 바랍니다!
Reference
이 문제에 관하여(JavaScript 이벤트 위임 작업 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/prkkhan786/how-javascript-event-delegation-works-50j7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)