事件冒泡、事件捕获和事件委托

前置知识

事件流

在第四代Web浏览器（IE4 和 Netscape Communicator4 ）开始开发时，开发团队碰到了一个有意思的问题：页面哪个部分拥有特定的事件呢？
两家浏览器的开发团队都是以同样的方式看待浏览器事件的。当你点击一个按钮的时候，实际上不光点击了这个按钮，还点击了它的容器以及整个页面。
事件流描述了页面接收事件的顺序。结果非常有意思， IE 和 Netscape 开发团队提出了几乎完全相反的事件流方案。IE将支持 事件冒泡 流 ， 而 Netscape Communicator 将支持事件捕获流。

在javascript里，事件委托是很重要的一个东西，事件委托依靠的就是事件冒泡和捕获的机制，下面来解释一下事件冒泡和事件捕获

正文

1.事件冒泡

什么是事件冒泡,他是如何工作的呢？

IE事件流被称为事件冒泡。在一个对象上触发某类事件（比如单击onclick事件）。这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活，或者它到达了对象层次的最顶层，即document对象（有些浏览器时window）。
也就是说，<div>元素,即被点击的元素,最先触发click事件,然后,click事件沿着DOM树一路向上,在经过的每个节点上依次触发,直至到达document对象.下图形象的展示了这个过程:

2.事件捕获

Netscape(网景公司) Communicator 团队提出了另一种名为 事件捕获 的事件流,事件捕获的意思是最不具体的节点 应该最先收到事件,而最具体的节点应该最后收到事件.事件捕获实际上是为了在事件到达最终目标前拦截事件.
在事件捕获中,click事件首先由 document 元素捕获,然后沿DOM树依次向下传播,直至到达实际的目标元素上.如下图所示:

虽然这是 Netscape Communicator 唯一的事件流模型，但事件捕获得到了所有现代浏览器的支持。实际上，所有浏览器都是从window对象开始捕获事件，而DOM2 Events 规范规定的是从document开始。

3.事件执行过程

下面来说说事件执行的过程：
1. 事件捕获过程： 当我们点击 TEXT时，首先时window-> document -> body -> div -> text,这个过程称为事件捕获,W3C浏览器的标准执行流程
2. 事件冒泡过程:text -> div -> body -> document -> window,这个过程称为事件冒泡.IE浏览器只支持冒泡,不支持捕获,W3C 浏览器先执行捕获,后执行冒泡

4.该怎么阻止事件冒泡/事件委托

event.stopPropagation( );事件处理过程中,阻止冒泡事件/事件捕获.

5. 事件委托(重点)

JavaScript 事件代理(委托) 是一种简单的技巧,把事件处理器添加到一个上级元素上,这样就避免了把事件处理器添加到多个子级元素上.这主要得益于浏览器的事件冒泡机制.
场景多用于给动态新增元素注册事件
事件委托的优点:
1.减少事件注册,节省内存
2.在table上代理所有td的click事件
3.在ul上代理所有li的click事件
4.简化了dom节点更新时,相应事件的更新
5.不用在新添加的li上绑定click事件
6.当删除某个li时,不用移解绑上面的click事件
事件委托的缺点:
1.事件委托基于冒泡,对于不冒泡的事件不支持
2.层级过多,冒泡过程中,可能会被阻止掉.
3.理论上委托会导致浏览器频繁调用处理函数,虽然很可能不需要处理,所以建议就近委托
4.把所有事件都用代理就可能会出来事件误判,比如,在document 中 代理了所有 button的click事件,另外的人在引用该js时,可能不知道,造成单击button触发了两个click事件

onclick ,on注册事件有个问题: 给同个元素注册同名事件时,会覆盖上面的
addEventListener 注册事件可以解决这个问题: 格式为:
addEventListener(‘事件类型(不要on)’,回调函数)

参考文献: JavaScript高级程序设计

这篇好文章是转载于：学新通技术网