事件流及事件冒泡机制
Posted 我是我的太阳
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件流及事件冒泡机制相关的知识，希望对你有一定的参考价值。
“DOM2级事件”规定的事件流包括三个阶段：
-
事件捕获阶段（为截获事件提供了机会）
-
处于目标阶段（实际的目标接收到事件）
-
事件冒泡阶段（可以在这个阶段对事件做出响应）
IE9、Opera、Firefox、Chrome 和 Safari 都支持 DOM 事件流；IE8 及更早版本不支持 DOM 事件流。
c、js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。
事件冒泡
如以下代码：
<!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html>
如果你单击了页面中的 <div> 元素，那么这个 click 事件会按照如下顺序传播：
(1) <div>
(2) <body>
(3) <html>
(4) document
所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒泡会跳过 <html> 元素（从 <body> 直接跳到 document ） 。IE9、Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。
事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
以前面的html为例子，那么单击 <div>元素就会以下列顺序触发 click 事件。
(1) document
(2) <html>
(3) <body>
(4) <div>
事件代理
根据浏览器的事件冒泡机制，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）
代码如下：
<ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
添加事件
代码如下：
var ul = document.getElementById(‘ul‘);
ul.addEventListener(‘click‘, function(event) {
if (event.target.tagName.toLowerCase() === ‘li‘) {
console.log(event.target.innerHTML)
}
});
上面代码的click事件的监听函数定义在ul节点，但是实际上，它处理的是子节点li的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而且以后再添加子节点，监听函数依然有效。
阻止冒泡
可以使用事件对象stopPropagation方法
代码如下：
p.addEventListener(‘click‘, function(event) {
event.stopPropagation();
});
阻止冒泡时间方法，兼容ie(e.cancleBubble)和ff(e.stopProgation)
代码如下：
function stopBubble(e){
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault
以上是关于事件流及事件冒泡机制的主要内容，如果未能解决你的问题，请参考以下文章