JS事件委托

一、什么是事件委托?

事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。

通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

 

二、为什么要用事件委托?

1、考虑一个ul,在li的数量非常少的时候,为每一个li添加事件当然会使用for循环;但是数量多的时候这样做太浪费内存,长到上百上千上万的时候,为每个li添加事件就会对页面性能产生很大的影响。

2、给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。

 

三、事件委托的作用

1、性能要好。

2、针对新创建的元素,直接可以拥有事件。

 

四、事件委托的局限性

当然,也是有一定局限性的;

比如 focus、blur 之类的事件本身没有事件冒泡机制,所以无法委托;

mousemove、mouseout 这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,因此也是不适合于事件委托的;

 

五、事件委托原理

事件委托就是利用事件冒泡原理实现的!

事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件;

 

例:页面上有一个节点树,div > ul > li > a

比如给最里面的a 加一个click 事件,那么事件就会一层一层的往外执行,执行顺序 a > li > ul > div, 有这样一个机制,当我们给最外层的div 添加点击事件,那么里面的ul , li , a 做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托他们父集代为执行事件;

 

六、JS事件委托 代码实现示例

 

1、HTML代码:

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表中间还有未知数个 li

 

我们来实现把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上:

 

2、JavaScript代码:

// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML);
  }
});

 

在上述代码中, target 元素则是在 #list 元素之下具体被点击的元素,然后通过判断 target 的一些属性(比如:nodeName,id 等等)可以更精确地匹配到某一类 #list li 元素之上;

 

当然,你也可以“使用 Element.matches 精确匹配”。

    A+
发布日期:2021年07月26日 20:22:17  所属分类:JavaScript
最后更新时间:2021-07-26 20:25:59
付杰
  • ¥ 99.0元
  • 市场价:129.0元
  • ¥ 169.0元
  • 市场价:299.0元
  • ¥ 129.0元
  • ¥ 79.0元
  • 市场价:99.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: