资讯专栏INFORMATION COLUMN

简单说 JavaScript中的事件委托(上)

fireflow / 749人阅读

摘要:说明这篇文章说中的事件委托,这次先说一些比较基本的知识。第一段绑定了两次事件,第二段绑定了一次事件也就是说,原来在上绑定的事件,现在委托在了父元素上,而在上只需要绑定一次就可以了。我们用事件委托的方式,再来改改。

说明

这篇文章说JavaScript中的事件委托,这次先说一些比较基本的知识。

事件委托 是什么

先来看看事件委托的概念

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

事件委托,你叫他 事件代理 也可以,都是一个意思。
事件:JavaScript 侦测到的行为就是事件,比如鼠标点击、某个键盘的键被按下、元素获得焦点。
委托:就是把原来自己做的事,交给别人做。

事件委托 的原理

要说事件委托的原理,我们应该先明白事件冒泡

事件冒泡:从目标元素出发,向外层元素冒泡,最后到达顶层(window或document),依次执行绑定在其上的事件。

我们来看段代码



 
    
 
 

    

效果图

从上面的图中我们看见,当点击 蓝色 p 元素时,先触发了 p 元素上绑定的事件,然后又触发了 红色 div 元素上绑定的事件,这就是事件冒泡了。

事件委托 的实现

先来段代码



 
 
 
    
  • 1
  • 2

我们用事件委托的方式改写一下上面的代码,不过在这之前,我们还要明白一下什么是 event 对象

任何事件触发后将产生一个event对象
event对象记录事件发生时的鼠标位置、键盘按键状态和 触发对象等信息
一般情况下,绑定事件处理函数时,event对象默认以第一个参数方式传入

event对象有许多的属性,具体的可以到这里去看
http://www.w3school.com.cn/js...

如果用事件委托,那代码就是这样的



 
 
 
    
  • 1
  • 2

上面的代码,应该很容易看懂的,我们看看他们的区别
1、第一段代码是在 每个 li 上绑定事件,第二段只是在 li 的父元素 ul 上绑事件。
2、第一段绑定了两次事件,第二段绑定了一次事件

也就是说,原来在 li 上绑定的事件,现在委托在了父元素 ul 上,而在 ul 上只需要绑定一次就可以了。

我们再来看另一种情况,当元素最开始不存在时,需要绑定事件,最先能想到会出现这种情况的场景就是,元素是通过发请求,获取数据后,拼接到页面上的。而这种元素如果在发请求之前就绑定事件,是不会生效的。



 
 
 
    
  • 1
  • 2

上面这段代码中,在元素 li3 还不存在的时候就绑定事件了,所以执行代码后就会报错

解决这个问题最直接的办法就是等元素添加到页面上之后,再绑定事件,我们来改改代码。



 
 
 
    
  • 1
  • 2

改成这样后,绑定事件就可以起作用了,但是这样如果元素改变多次,就要元素渲染一次,就绑定一次事件,显然是有点麻烦了。

我们用事件委托的方式,再来改改。



 
 
 
    
  • 1
  • 2

上面这段代码,我们用事件委托的方式,并不在生成的元素上绑定事件,而是在生成元素的父元素上绑定事件,因为父元素是一直存在的,所以绑定的事件就可以生效。

事件委托 的好处

1、减少了事件监听器,原来需要在多个子元素绑定相同的事件处理函数,现在只需要在祖先元素(一般为父元素)上统一定义一次即可。

2、减少内存消耗,提高了页面性能,这主要还是减少了事件处理函数的数量

3、动态绑定事件,比如我们需要增加一个元素,那么我们还需要重新给这个元素绑定事件,但是用事件委托就没关系了,因为事件 不是 绑定在目标元素上的,而是绑定在已经存在于页面上的父元素,冒泡到父元素上时,执行绑定在父元素上的事件处理函数,这样能减少很多不必要的工作。

事件委托 的局限

focus、blur 之类的事件本身没有事件冒泡机制,所以无法委托;
mousemove、mouseout 这样的事件,虽然有事件冒泡,但是每次都要计算它的位置,对性能消耗高,而且很麻烦,因此也是不适合用事件委托。

总结

这篇文章是比较基础的,还有一些东西没有说,比如文中说 事件委托的实现 的时候,举的例子比较简单,监听的 li 里面没有子元素,如果存在子元素时,那点击子元素 又会有什么问题呢? 还有 JQuery中的事件委托 又是怎么做的呢? 看这里

简单说 JavaScript中的事件委托(下)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112929.html

相关文章

  • 简单 JavaScript中的事件委托

    摘要:说明这篇文章说中的事件委托,这次先说一些比较基本的知识。第一段绑定了两次事件,第二段绑定了一次事件也就是说,原来在上绑定的事件,现在委托在了父元素上,而在上只需要绑定一次就可以了。我们用事件委托的方式,再来改改。 说明 这篇文章说JavaScript中的事件委托,这次先说一些比较基本的知识。 事件委托 是什么 先来看看事件委托的概念 事件委托就是利用事件冒泡,只指定一个事件处理程序,就...

    SexySix 评论0 收藏0
  • 简单 JavaScript中的事件委托(下)

    摘要:说明上次我们说了一些,关于中事件委托的基础知识,这次我们继续来看。可选类型,一个选择器,用于指定哪些后代元素可以触发绑定的事件。类型,指定的事件处理函数。 说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看。 解释 先来一段代码 1 2 ul.onclick...

    MasonEast 评论0 收藏0
  • 简单 JavaScript中的事件委托(下)

    摘要:说明上次我们说了一些,关于中事件委托的基础知识,这次我们继续来看。可选类型,一个选择器,用于指定哪些后代元素可以触发绑定的事件。类型,指定的事件处理函数。 说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看。 解释 先来一段代码 1 2 ul.onclick...

    lavnFan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<