js 使用事件委托

Posted 蒂其之死

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 使用事件委托相关的知识,希望对你有一定的参考价值。

想象一下,如果你有一个无序列表,里面有一堆<li>元素,每一个<li>元素都会在点击的时候触发一个行为。这个时候,你通常会在每一个元素上添加一个事件监听,但是如果当这个元素或者你添加了监听的这个对象会被频繁的移除添加呢?这个时候,你在移除添加元素的同时需要处理事件监听的移除和添加。这个时候,我们就需要引入事件委托了。 

事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。下面我们给出了一个简单的例子: 

javascript代码 
  1. // 获取元素,添加事件监听  
  2. document.querySelector(‘#parent-list‘).addEventListener(‘click‘, function(e) {  
  3.     // e.target 是一个被点击的元素!  
  4.     // 如果它是一个列表元素  
  5.     if(e.target && e.target.tagName == ‘LI‘) {  
  6.         // 我们找到了这个元素,对他的操作可以写在这里。  
  7.     }  
  8. });  



上面的例子是不可思议的简单,当事件发生的时候,它没有轮询父节点去寻找匹配的元素或选择器,且它不支持基于选择器的查询(例如用class name,或者id来查询)。所有的JavaScript框架提供了委托选择器匹配。重点是,你避免了为每一个元素加载事件监听,而是在父元素上加一个事件监听。这样大大的增加了效率,并且减少了很多维护!







以上是关于js 使用事件委托的主要内容,如果未能解决你的问题,请参考以下文章

对于原生js中的事件委托解析

JS中的事件委托详解(未完)

js事件事件委托

js的事件委托机制

深入理解-事件委托

js 使用事件委托