js原理:事件委托

38 浏览发布于 作者 zouyang (欢迎转载-请注明出处链接)留下评论分享按钮

一、场景

假如有一个列表ul,里面有一大堆 li,我们需要给 所有的 li 都加上 某某事件。如果我们对每个 li 进行事件的绑定,假如有1000个li,那么我们要绑定1000个事件。
假如有一个动态加载dom元素到html内,你要给动态加载的这些元素绑定事件。

二、事件委托登场

此时,就是 事件委托 登场了:我们可以把所有 li 的事件都委托给它的 父级 ul ,我们给 ul 绑定事件,这样就只要绑定一个事件。所有 li 的点击事件就会冒泡到 ul 上,从而执行到绑定的事件。

三、需要预备的知识

1、事件冒泡
子元素(li)的事件需要传递给父元素(ul),就涉及:事件冒泡 原理,这个得懂;事件冒泡本文不讲,这里只提一下比较少遇到的 事件源 的主意事项:

事件源有兼容性问题,在IE下获取事件源使用:事件对象.srcElement
标准浏览器下获取事件源使用:事件对象.target

2、事件源
父元素(ul)又要能在事件内针对各个子元素(li)进行操作,就涉及:event对象的事件源,即 不管在哪个事件中,只要你操作的那个元素就是事件源(触发该事件的对象)。

四、示例

举例1:鼠标移入每个 li 会触发一个鼠标移入事件,该事件会冒泡到 ul 上,ul 上绑定的事件里,通过事件源,就都能获取到各 li 的 innerHTML,每个li的事件是委托绑定到了 ul 上的:

既然都拿到了每个li,那么就可以搞很多事了:),
比如,还可以弹出标签名(不含括号),使用 nodeName,alert( target.nodeName ); 等等可以做很多事。

举例2:事件委托有一个很充分应用,是在 React 16 或更早版本中对事件绑定使用了委托。React 并不会将事件附加到 DOM 节点上。相反,React 会直接在 document 节点上为每种事件类型附加一个处理器,实现事件委托,这样使得在大型应用程序上具有性能优势。但在 React 17 中,React 不再向 document 附加事件处理器,而将事件处理器附加到渲染 React 树的根 DOM 容器中了。

(完)

想要打赏,请点击这里

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注