事件流
描述的是从页面中接受事件的顺序。浏览器两大阵营在早些时候看法是一致的,点击页面中的元素,其实相当于也点击了HTML,整个页面。浏览器两大阵营提出了差不多完全相反的事件模型。
事件冒泡,
IE事件流,事件由最具体的元素接受,如果点击一个页面中的div,这个点击事件从点击的元素按HTML结构逐层向上向父级冒泡,注意不是视觉上的父级,顺序是1,div 2,body 3,html 4,document
![](https://i-blog.csdnimg.cn/blog_migrate/657fafed3fe668665eb8fee72b5435bb.png)
所有浏览器都支持事件冒泡,只不过有轻微区别。
事件捕获,
Netscape(网景)事件流,不太具体的节点应该更早接受到事件,用意是事件到达预定目标之前捕获它。IE8以及以下不支持事件捕获,不建议使用事件捕获。如果点击div,那么最先接收到事件的是document,然后HTML结构上向下,知道预定目标。顺序是1,documen 2,html 3,body 4,div
![](https://i-blog.csdnimg.cn/blog_migrate/b1dbbd3996c7386615a3252aeb747ee7.png)
DOM事件流,
DOM2级事件流包括三个阶段,分别是,事件捕获阶段,处于目标阶段,事件冒泡事件,在事件捕获阶段,预定目标是不会接收到事件的,下一个阶段是处于目标阶段,执行事件处理程序,然后是事件捕获阶段。IE8以及以下不支持事件流。
![](https://i-blog.csdnimg.cn/blog_migrate/b72953d5c0bb815cca60168ba082dae9.png)
小例子
.grad{
width: 300px;
height: 300px;
background: red;
margin: 0 auto;
}
.par{
width: 200px;
height: 200px;
background:black;
}
.son{
width: 100px;
height: 100px;
background: green;
}
<div class="grad">
<div class="par">
<div class="son"></div>
</div>
</div>
var grad = document.getElementsByClassName("grad")[0];
var par = document.getElementsByClassName("par")[0];
var son = document.getElementsByClassName("son")[0];
grad.addEventListener("click",function(){console.log('grad冒泡');},false);
par.addEventListener("click",function(){console.log('par冒泡');},false);
son.addEventListener("click",function(){console.log('son冒泡');},false);
grad.addEventListener("click",function(){console.log('grad捕获');},true);
par.addEventListener("click",function(){console.log('par捕获');},true);
son.addEventListener("click",function(){console.log('son捕获');},true);
运行上面代码会依次打印grad捕获 ==>par捕获==> son冒泡==>son捕获==>par冒泡==>grad冒泡,首先是按照事件流的顺序先捕获后冒泡,是但是对于目标元素,是取决于程序绑定顺序,也就是说,将上面绑定son的两条句子换一下顺序的话,那么顺序就变成了,grad捕获 ==>par捕获==> son捕获==>son冒泡==>par冒泡==>grad冒泡。
事件对象,事件元对象的兼容
事件对象兼容方式: var event= e || window.event;
事件元对象兼容:var eventTarget = event.target || event.srcElement;
取消事件冒泡
标准浏览器:event.stopPropagation();
IE浏览器: event.cancelBubble=true;