大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，修真院官网js任务4中涉及的IE事件流和W3C事件流有什么区别，参数分别是什么，以及如何阻止事件冒泡？
小课堂【北京第225期】
分享人：郭婷婷
1.背景介绍
事件
JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 它是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之间交互的桥梁。
你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。 典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。
事件流
事件流描述的是从页面中接收事件的顺序。
当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？ 可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是同一个圆，而是纸上的所有圆。
IE和网景两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。 在单击按钮的同时，也单击了按钮的容器元素，甚至也单击了整个页面。
IE提出的是冒泡流,而网景提出的是捕获流,后来在W3C组织的统一之下,JS支持了冒泡流和捕获流, 但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流),所以为了能够兼容更多的浏览器,建议大家使用冒泡流。
2.知识剖析
事件冒泡
IE的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收， 然后逐级向上传播到较为不具体的节点（文档）。也就是子级元素先触发，父级元素后触发。
事件捕获
网景团队提出的另一种事件流叫事件捕获（event capturing)。 事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。 也就是父级元素先触发，子级元素后触发。
DOM事件流
DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
事件捕获阶段：实际目标div在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到html再到body就停止了。(图中为1~3.)
处于目标阶段：事件在div上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段：事件又传播回文档。
可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数， 它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
element.addEventListener(event,function,useCapture)
event:字符串，指定事件名。（不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。）
function:指定要事件触发时执行的函数。
useCapture:可选。布尔值，指定事件是否在捕获或冒泡阶段执行。(true - 事件句柄在捕获阶段执行;false- false- 默认。事件句柄在冒泡阶段执行)
IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。
element.attachEvent("onclick", doSomething2);
3.常见问题
如何阻止事件冒泡？
4 解决方案
事件的传播是可以阻止的：
• 在W3c中，使用event.stopPropagation()方法
• 在IE下设置event.cancelBubble = true；
5.编码实战
6.扩展思考
事件委托
事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上， 真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。 前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。 这里其实还有2层意思的： 第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的； 第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？ 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能； 每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，自然性能就会更好。
7.参考文献
参考2：js之事件冒泡和事件捕获详细介绍
参考2：js中的事件委托或是事件代理详解
8 更多讨论
鸣谢
感谢大家观看
BY : 郭婷婷
PPT链接：https://ptteng.github.io/PPT/PPT/js-04-event-flow.html
视频链接：https://pan.baidu.com/s/1qYc9n1y 密码: ctxs
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
