事件代理——减少事件监听函数

事件代理(Event Delegation)很简单,主要是为了减少了事件监听函数的数量,通过利用事件冒泡阶段,将事件的处理放置在父元素上实现。

来看一个例子:

HTML上创建一个id为app的div:

创建ul列表和li,给每一个li添加一个监听函数:

上面形成的代码效果如下:

事件代理——减少事件监听函数_第1张图片

由于每一个li都有对应的监听函数,但是监听函数都是一样的,我们可以把函数提取出来:

事件代理——减少事件监听函数_第2张图片

上面的代码中,依旧有很多事件监听函数指向同一个函数,仍然没有解决问题,我们可以通过事件代理来实现相同的效果:

事件代理——减少事件监听函数_第3张图片

很简单,主要是在事件冒泡的阶段,目标元素不设置监听函数,而是在父元素上设置监听函数,通过event对象的target属性确定事件发生的目标元素,当目标元素一致时,父元素上的监听函数就进一步起作用。

最后

看到这里,恭喜你完成了事件代理的学习

更多优质文章可以关注公众号『鹏哥儿的Echo

生命不息,笔耕不辍

Reference

https://www.geeksforgeeks.org...

你可能感兴趣的:(javascripthtml)