使用原生 JS 实现事件委托

事件委托是什么

把若干个节点上的相同事件的处理函数event listener绑定到它的父节点上去, 在父节点上统一处理,减轻对event listener的管理负担。

为什么要有事件委托

1.监听还不存在的元素或者已经存在的元素
2.减少监听器的个数

如何做到事件委托

<body>
  <button id="xxx">取号</button>
  <ul>
    <li>
      <ol id="yyy"></ol>
    </li>
  </ul>
  <script>
    let button = document.querySelector("#xxx");
    let yyy = document.querySelector('#yyy');
    button.addEventListener('click',function(){
      let number = parseInt(Math.random() * 100, 10);
      let li = document.createElement('li');
      let span = document.createElement('span');
      span.textContent = number;
      li.appendChild(span);
      yyy.appendChild(li);
    });
    yyy.addEventListener('click',function(e){
      let element = e.target;
      while(element.tagName !== "LI"){
        if(element === yyy){
          element = null;
          break;
        }
        element = element.parentNode;
      }
      element && element.remove()
    })
  </script>
</body>

用户先点击取号,再点击li元素或者span元素时,就执行ol元素的监听事件,把点击的li元素或span元素删除,不用监听每个元素,监听它们的父元素即可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容