js给动态生成元素绑定事件之事件委托方法on、live、delegate

最新推荐文章于 2023-01-13 13:59:45 发布

原创最新推荐文章于 2023-01-13 13:59:45 发布 · 3k 阅读

CC 4.0 BY-SA版权

文章标签：

47 篇文章

订阅专栏

本文介绍了事件委托的概念及其在JavaScript中的应用，探讨了事件委托如何通过利用事件冒泡原理提高性能，并对比了几种不同的事件绑定方法（如on、live、delegate、bind）之间的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是事件委托？

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。

事件委托的好处：

提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。

应用场景：js动态生成的dom元素，无法直接操作，需要使用事件委托绑定方法。

语法结构：例如父id = “aaa”. 动态生成的span,需要绑定事件

 $("#aaa").on('click','span',function(){
            //代码块
          alert("事件委托");
     });

几种事件绑定方法on、live、delegate、bind有什么区别？

live 把事件委托交给了document（根节点），document 向下去寻找符合条件的元素（），不用等待document加载结束也可以生效。

delegate可指定事件委托对象，相比于live性能更优，直接锁定指定选择器；

on事件委托对象选填，如果不填，即给对象自身注册事件，填了作用和delegate一致。

bind只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件，存在局限性。