집 > 기사 > 웹 프론트엔드 > 자바스크립트의 이벤트 위임(그림 및 텍스트 튜토리얼)

자바스크립트의 이벤트 위임(그림 및 텍스트 튜토리얼)

亚连원래의: 2018-05-19 14:53:301147검색

이 글은 주로 JavaScript의 이벤트 위임에 대한 자세한 설명에 대한 내용을 소개하고 있으니 필요하신 분들은 참고하시면 됩니다

요즘 면접 질문을 보니 1000li에 클릭 이벤트를 추가해 달라는 내용이 있었을 텐데요. 추가하는 방법은? 대부분의 사람들의 첫인상은 각 리에 하나씩 추가하는 것일 수 있습니다. 이 경우 인터뷰 중에 GG가 될 것으로 추정됩니다. 이벤트 위임 메커니즘에 대해 살펴보겠습니다.

먼저 이벤트 버블링과 이벤트 캡처 메커니즘에 대해 이야기해 보겠습니다. 이벤트 버블링은 Microsoft에서 제안했고, 이벤트 캡처는 당시 Netscape에서 제안했습니다. 나중에 w3c는 타협 방법을 채택할 수밖에 없었습니다. 이벤트가 발생한 후 먼저 캡처한 다음 버블링했습니다.

일반적으로 js에서는 이벤트를 모니터링하는 세 가지 방법이 있습니다. 즉,

　　 ele.addEventListener(type,listener,[useCapture]);//IE6~8은 지원하지 않습니다

　　ele.attachEvent('on'+type,listener);//IE6~10은 지원하지 않습니다, IE11 does not Support

　ele.onClick=function(){};//모든 브라우저 지원

w3c 사양은 캡처 단계, 대상 단계, 버블링 단계의 세 가지 이벤트 단계를 정의하며, w3c dom2 레벨 규정에서는 addEventListener를 사용하여 이벤트를 수신합니다. 따라서 먼저 addEventListener를 사용하여 설명하겠습니다. 먼저 가짜 거품은 물에 돌을 던지면 물 속의 거품이 위로 올라오는 것과 같습니다. 상향식, 즉 트리거링을 의미합니다. 이벤트는 하위 요소의 방향에서 상위 요소로 트리거되는 반면 캡처 메커니즘은 그 반대입니다. 캡처 메커니즘은 상위 요소에서 하위 요소로 이벤트를 트리거하며 세 번째 매개변수는 다음과 같습니다. addEventListener 함수는 캡처 메커니즘을 사용할지 아니면 버블링 메커니즘인지 결정하는 데 사용됩니다. useCapture가 true이면 캡처 메커니즘입니다. useCapture가 false이면 버블링 메커니즘입니다. :

Copy code

<p class="parent">
  <p class="child">

  </p>
</p>
<script>
  var parent = document.getElementsByClassName(&#39;parent&#39;)[0];
  var child = document.getElementsByClassName(&#39;child&#39;)[0];

  parent.addEventListener(&#39;click&#39;,function(){
    console.log("这里是父元素");
  },false);
  child.addEventListener(&#39;click&#39;,function(){
    console.log("这里是子元素");
  },false);
</script>

하위 요소를 클릭하면 위의 이미지가 표시됩니다. false를 true로 변경하면 실행 순서가 바뀌는 것을 알 수 있습니다. 버블링과 캡처는 정반대입니다.

그러면 이 바인딩 메커니즘을 사용할 때의 단점은 각 객체에 이벤트를 바인딩하는 것이 특히 번거로울 것입니다. 더 중요한 것은 JavaScript와 DOM 노드 사이에 상관관계를 추가했다는 것입니다. 게다가 순환 참조가 나타나면 메모리 누수가 발생할 가능성이 높습니다.

따라서 이를 해결하는 한 가지 방법이 있습니다. 단점은 이벤트 위임입니다. 이 방법을 사용하면 이러한 수신 이벤트를 해당 노드의 상위 요소에 바인딩하는 것을 방지할 수 있습니다. 이벤트가 트리거될 수 있도록 여기에 제공하는 예는 davidwalsh가 제공한 예입니다.

이제 상위 요소 ul과 여러 li 하위 요소가 있습니다.

<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>

이제 우리는 무엇을 할까요? 달성하려는 목표는 각 li 노드에 대해 클릭하면 li 노드의 내용이 출력된다는 것입니다. 위의 작성 방법에 따라 이러한 li를 선택하고 해당 메소드를 추가한 다음 해당 li 노드가 없으면 제거할 수 있습니다. 100li, 1000li가 있으면 악몽이 될 것입니다. 더 나은 해결책은 부모 요소에 청취 이벤트를 추가하는 것입니다. 이벤트에서 어떤 li가 클릭되었는지 확인하는 방법입니다. , 현재 이벤트의 대상을 판단하여 그것이 우리가 찾고 있는 노드인지 판단할 수 있습니다. 여기에 간단한 예가 있습니다:

// 找到父元素,绑定一个监听事件
document.getElementById("parent-list").addEventListener("click", function(e) {
  // e.target是点击的元素
  // 如果它是li元素
  if(e.target && e.target.nodeName == "LI") {
    //
    console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
  }
});

ul에서 클릭 이벤트가 발생하면 addEventListener의 기본값은 버블링 이벤트이므로 청취는 이벤트가 발생하면 이벤트가 트리거된 후 해당 요소가 찾고 있는 대상 요소인지 여부를 감지하고, 그렇지 않으면 무시할 수 있습니다. 대상 요소의 레이블은 우리에게 필요한 대상 요소입니다. 대상 요소의 속성이나 클래스 이름을 기반으로 감지하고 처리를 위해 API ele.maeches를 사용할 수도 있습니다.

document.getElementById("myp").addEventListener("click",function(e) {
  // e.target 就是当前被点击的元素
 if (e.target && e.target.matches("a.classA")) {
  console.log("Anchor element clicked!");
  }
});

위 내용은 제가 모두를 위해 컴파일한 것입니다. . 앞으로 모든 사람에게 도움이 되기를 바랍니다.

자바스크립트의 이벤트 위임(그림 및 텍스트 튜토리얼)

관련 기사