집 > 기사 > 웹 프론트엔드 > JS 이벤트 위임 사용에 대한 자세한 설명

JS 이벤트 위임 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-03 15:51:061992검색

이번에는 JS 이벤트 위임 사용에 대한 자세한 설명을 가져왔습니다. JS 이벤트 위임 사용 시 주의사항은 무엇인가요?

이벤트 위임(이벤트 프록시이라고도 함), 사실 이 문제도 간단합니다. 이벤트 위임을 이해하려면 먼저 이벤트 버블링의 메커니즘을 이해해야 합니다. 이벤트 버블링의 예를 들어보겠습니다.

<ul>
    <li>点击</li>
</ul>
<script>
    var ul=document.getElementsByTagName('ul')[0];
    var li=document.getElementsByTagName('li')[0];
    ul.addEventListener('click', function(){
      alert('我是ul,我被点击了');
    }, false);
    li.addEventListener('click', function(){
      alert('我是li,我被点击了');
    }, false);
</script>

이 코드에서는 li를 클릭하면 li의 클릭 이벤트가 발생하지만 이때 ul의 클릭 이벤트도 발생합니다. 이를 이해한 후 이벤트 위임에 대해 이야기할 수 있습니다. 이벤트는 하위 요소(li)의 상위 요소(ul)에서 생성될 수 있으므로 ul 자체에 클릭 이벤트를 추가하고 모든 li 이벤트를 결합할 수 있습니다. 여기 있는 일부 친구들은 이벤트 위임의 사용을 아직 이해하지 못할 수도 있습니다. 설명을 위해 이벤트 위임의 예를 들어 보겠습니다.

<ul>
    <li>点击1</li>
    <li>点击2</li>
    <li>点击3</li>
    <li>点击4</li>
    <li>点击5</li>
</ul>
<script>
    //使用事件委托的代码
    var ul=document.getElementsByTagName('ul')[0];
    ul.addEventListener('click', function(e){
      alert(e.target.innerHTML);
    }, false);
    //不使用事件委托，循环给li添加click事件
    var li=document.getElementsByTagName('li')
    for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
        alert(this.innerHTML);
      }
    }
</script>

위 코드는 이벤트를 위임합니다. ul이 제공되면 클릭 이벤트만 발생합니다. ul에 추가된 해당 li을 브라우저에서 실행하면 해당 li에 해당하는 innerHTML，这个function(e){};中的e这个参数实际上就是当前我们点击li时，系统传给我们的一些事件信息,e.target实际上指的就是当前我们点击的这个li，在这里我们每次弹出的都是当前点击对象的innerHTML이 팝업되는 간단한 이벤트 위임 사례입니다.

이벤트 위임은 코드 최적화에 있어서 매우 중요합니다. 우리 모두는 빈번한 DOM 작업이 성능 집약적이라는 것을 알고 있습니다. 위 코드가 수행하는 작업을 달성하기 위해 이벤트 위임을 사용하지 않는 경우 , 그런 다음 for 루프를 사용하여 각 li에 대한 클릭 이벤트를 작성해야 합니다. 이렇게 하면 dom 작업이 더 많이 발생하게 됩니다. dom 작업의 성능은 말할 것도 없고 100개 이상이면 어떻게 될까요? li도 여러 개의 for 루프 자체가 많은 이벤트를 차지합니다. 이벤트 위임을 사용하면 for 루프의 성능 소모와 수많은 DOM 작업의 성능 소모를 피할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!