Javascript的事件委托

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在谈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，提高性能。