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