JS中的事件委托实例浅析

前端之家收集整理的这篇文章主要介绍了JS中的事件委托实例浅析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JS中的事件委托。分享给大家供大家参考,具体如下:

事件委托

(也叫

事件代理

),其实这个问题也简单,要想弄明白事件委托,我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子:

  • 点击
  • 在这段代码中,当我们点击li的时候出发了li的click事件,但是在这时,ul的click事件也被触发了,这就是事件的冒泡。搞明白这个之后,我们就可以来说事件委托了,既然事件能从子元素(li)冒泡的父元素(ul)身上,那么我们就可以给ul自己加一个click事件,把所有li的事件都委托给了我们的父级(ul)身上,可能到这里有些朋友还是不明白这个事件委托到底有什么用,我们在举一个事件委托的实例来说明一下:

  • 点击1
  • 点击2
  • 点击3
  • 点击4
  • 点击5
  • 我们以上代码把事件委托给了ul,只给ul增加点击事件,在浏览器中运行点击对应的li会弹出li对应的innerHTML,这个function(e){};中的e这个参数实际上就是当前我们点击li时,系统传给我们的一些事件信息,e.target实际上指的就是当前我们点击的这个li,在这里我们每次弹出的都是当前点击对象的innerHTML,这就是一个简单的事件委托的案例。

    而事件委托对于我们优化代码意义是非常大的,我们都知道,频繁的dom操作是非常耗费性能的,现在ul里边是5个li,我们假如不用事件委托实现上面代码所作的事情,就需要用for循环,给每个li都写一个click事件,这样一来dom操作就比较多了,如果是10个li呢,100个甚至更多呢,单不说dom操作影响的性能,li过多for循环自身就会占用大量的事件。如果利用事件委托,既避免了for循环耗费的性能,又省去了繁多的dom操作耗费的性能

    PS:

    关于javascript事件说明可参考本站javascript事件与功能说明大全:

    更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《错误与调试技巧总结》

    希望本文所述对大家JavaScript程序设计有所帮助。

    原文链接:https://www.f2er.com/js/33060.html

    猜你在找的JavaScript相关文章