IE事件流和W3C事件流有什么区别，参数分别是什么，以及如何阻止事件冒泡？

大家好，我是IT修真院武汉分院第五期的学员，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网js任务4-IE事件流和W3C事件流有什么区别，参数分别是什么，以及如何阻止事件冒泡？

1.知识剖析

什么是事件？什么是事件流？

HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。

浏览器的事件历史

当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不是一个圆，而是纸上的所有圆。

两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面。但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

2.知识剖析

事件冒泡流

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。以下面的HTML页面为例。也就是说，click事件首先在div

元素上发生，而这个元素就是我们单击的元素，然后click事件沿着dom树向上传播，在每一级节点都或发生，直至传播到document对象

事件捕获流。

事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。比如说刚才的demo，如果是事件捕获的话，事件发生顺序会是刚好与上面相反的。即window,document,document.body,button。虽然事件捕获是Netscape唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。但由于老版本的浏览器不支持，因此很少有人使用事件捕获。所以放心的使用事件冒泡，有特殊需要再使用事件捕获即可。

dom事件流

DOM事件流可以分为下面3个阶段：

1. 事件捕获阶段

2. 处于目标阶段

3. 事件冒泡阶段

3.常见问题

如何阻止事件冒泡？

4.解决方案

根据DOM事件流机制，在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上，如果这些祖辈元素上也绑定了相应的事件处理函数，就会触发执行这些函数。

使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。event.stopImmediatePropagation()不仅会阻止事件向祖辈元素的传播，还会阻止该元素绑定的其他(尚未执行的)事件处理函数的执行。

6.扩展思考

事件处理程序类别有哪些？

html事件处理程序：

某个元素支持的某个事件可以用与事件处理程序同名的html特性来指定，该特性的值是能够执行的JavaScript代码,这也是我们最初学js，最开始的方法。

优点：简单明了，省去获取元素等一系列前提操作

缺点：html代码与js代码高度耦合，不符合分离原则

DOM0级别事件处理函数

使用 element.on[eventname]=fn的方式给元素添加事件

var oBtn=document.getElementById('click');

//该方式被认为是元素的方法，即事件处理程序在元素的作用域中进行，this即该元素本身

oBtn.onclick=function(){

alert(this.id);//click

}

//注意：删除该事件处理程序可以用如下方法

oBtn.onclick=null;//即点击后不再有任何反应

添加事件处理函数addEventListener

参数1 指定事件名称...click mouseover mouseout

参数2 事件处理程序（匿名函数或者有名函数）

参数3 true（捕获阶段发生） or false（冒泡阶段发生）

７.参考文献

文献１：理解dom事件流的概念

文献２：stopPropagation() 方法

８.更多讨论

有哪些常见的事件?

ppt;ppt

视频：

IE事件流和W3C事件流有什么区别_腾讯视频

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请码：83020780，或者你可以直接点击此链接：http://www.jnshu.com/login/1/83020780