mysql 冒泡_事件冒泡和事件捕获

事件冒泡

事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播。

当用户点击了

元素，click事件将按照

—>—>—>document的顺序进行传播。若在

和上都定义了click事件

点击

，将先输出“div”，再输出“body”。

IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。

事件捕获

事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。当用户点击了

元素，采用事件捕获，则click事件将按照document—>—>—>

的顺序进行传播。

若在

和上都定义了click事件，如下：

点击

，将先输出“body”，再输出“div”。

IE9，chrome，Firefox，Opera，Safari都支持事件捕获，但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播，但是现在的浏览器实现都是从window对象开始捕获事件。

DOM事件流

"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。以上面的HTML页面为例，单击

元素将按照下图触发事件：

若在

和上都定义了click事件，如下：

点击

，将先输出“event catch”，再输出“div”，最后输出“event bubble”。

事件处理程序

事件是用户或浏览器自身执行的某种动作，而响应某个事件的函数叫做事件处理程序。HTML事件处理程序、DOM0级事件处理程序和IE事件处理程序均以“on”开头，DOM2级事件处理程序不需要加“on”。

HTML事件处理程序

DOM0级事件处理程序

DOM2级事件处理程序

IE9，chrome，Firefox，Opera，Safari均实现了DOM2级事件处理程序，绑定事件方法addEventListener()接收三个参数：事件名称，事件处理函数和一个布尔值。布尔值为true，则表示在捕获阶段调用事件处理程序；如果为false，则表示在冒泡阶段调用事件处理程序。addEventListener允许在同一个元素上添加多个事件处理程序，如下所示：

先输出“event bubble”，后输出“event catch”，说明addEvenListener绑定的处理程序执行顺序和绑定顺序相同。

通过DOM2级事件处理程序指定的方法，this也引用当前元素，如下：

输出“myDiv”。

删除DOM2级事件处理程序，采用removeEventListener()，删除时传入的参数必须和绑定时传入的参数相同，不能传入匿名函数。如下所示：

IE事件处理程序

IE8和IE8以下的版本不支持addEventListener()，而是采用attachEvent()来实现事件绑定。目前只有IE和Opera支持attachEvent()。IE9支持addEventListener()，同时也兼容IE8的attachEvent()方法，但是IE9和IE8对attachEvent()的实现有点不同。如下所示：

IE9和IE10先输出“1”，再输出“2”，而IE8和IE7先输出“2”，再输出“1”。

删除IE事件处理程序，采用detachEvent()，删除时传入的参数必须和绑定时传入的参数相同，不能传入匿名函数。如下所示：

总结：attachEvent()采用冒泡方式，而addEventListener()可以采用冒泡或事件捕获方式。

输出顺序：body:event catch—>parent:event catch—>child—>parent:event bubble—>body:event bubble

W3C

任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。

对于正常的web开发，可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的useCapture参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。

element.addEventListener(event, function, useCapture)

阻止冒泡

在正常的开发过程中，如果想要阻止事件的传播，通过一个方法实现。

在微软的模型中，你必须设置事件的cancelBubble的属性为true

window.event.cancelBubble = true

在w3c模型中你必须调用事件的stopPropagation()方法

e.stopPropagation()

通过调用这些方法会阻止所有冒泡向外传播。跨浏览器解决方案：

function doSomething(e) {

if (!e) {

var e = window.event;

e.cancelBubble = true;

}

if (e.stopPropagation) {

e.stopPropagation();

}

}