Javascript的事件委托

时间:2022-03-26 16:38:02

在谈js的事件委托之前,先来简单说说js事件的一些基础知识吧。

什么是事件?Javascipt与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器中发生的一些特定的交互瞬间。

什么是事件流?事件流描述的是从页面接受事件的顺序。事件流主要分为两种,事件冒泡和事件捕获。

什么是事件冒泡和事件捕获?

事件冒泡即事件开始时有最具体的元素(文档中嵌套最深的那个节点) 接收,然后逐级向上传播到较为不具体的节点。

比如有那么一个节点树,document>html>body>div,当我们给div加上一个点击事件的时候,那么这个点击事件会按照div>body>html>document这个顺序传播。

事件捕获恰好与事件冒泡相反,它的机制是从不太具体的节点应该更早的接收到事件,而最具体的节点应该最后收到事件。

还是刚刚那个例子,有那么一个节点树,document>html>body>div,当我们给div加上一个点击事件的时候,那么这个时候的触发顺序应该是document>html>body>div。

事件委托

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

对于如何解释清楚事件委托,下面有一个示例,是从其他大牛上的博客看到的,解释的非常清楚,这里就拿过来摘抄了。

有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的:

第一,现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的;

第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。

比如对ul下4个li设置点击事件,原来的方法可能是对li遍历,然后加上点击事件。用事件委托的话直接对ul设置点击事件,可以达到少操作几次DOM,提高性能。