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!");
    }
});

활동 권한 수여의 배후 개념을 직관적으로 이해하고 권한 수여의 힘을 믿게 해줄 수 있기를 바랍니다!

좋은 웹페이지 즐겨찾기