大家好，这里是修真院前端小课堂，今天给大家分享的是
《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
【更多内容，可以加入IT交流群565734203与大家一起讨论交流】
【这里是技能树·IT修真院：IT修真院官网，初学者转行到互联网的聚集地】