大家好，这里是修真院前端小课堂，今天给大家分享的是
《如何阻止事件冒泡和默认行为？》
1. 背景介绍
浏览器的事件发生顺序
浏览器的事件发生顺序分为事件冒泡与事件捕获，分别由微软和网景公司提出。
事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到 document 对象。
因此在事件冒泡的概念下在 p 元素上发生 click 事件的顺序应该是 p -> div -> body -> html -> document
事件捕获会从最外层开始发生，直到最具体的元素。
因此在事件捕获的概念下在 p 元素上发生 click 事件的顺序应该是 document -> html -> body -> div -> p
网景 和 微软 曾经的战争还是比较火热的，当时， 网景主张捕获方式，微软主张冒泡方式。后来 w3c 采用折中的方式，平息了战火，制定了统一的标准 —— 先捕获再冒泡。
默认行为
浏览器的一些默认的行为。例如：点击超链接跳转，点击右键会弹出菜单，滑动滚轮控制滚动条
2. 知识剖析
如何切换事件冒泡与事件捕获
使用 addEventListener 方法，其第三个参数可选择事件的发生顺序
element.addEventListener(event, function, useCapture)
第三个参数默认值是 false，表示在事件冒泡阶段调用事件处理函数；如果参数为 true，则表示在事件捕获阶段调用处理函数。
3. 常见问题
如何阻止事件冒泡和默认事件？
4. 解决方案
阻止事件冒泡
DOM 中提供 stopPropagation () 方法，但 IE 不支持，使用 event 对象在事件函数中调用就行.
IE 中提供的是，cancelBubble 属性，默认为 false，当它设置为 true 时，就是阻止事件冒泡，也是用 event 对象在事件函数中调用.
jQuery 中提供了 stopPropagation () 方法来停止事件冒泡，当需要时，只需用用 event 对象来调用就行，即 event.stopPropagation ();
阻止默认行为
DOM 中提供 preventDefault () 方法来取消事件默认行为，但是只有当 cancelable 属性设置为 true 的事件，才可以使用 preventDefault () 来取消事件默认行为，使用 event 对象在事件函数中调用就行。
IE 中提供的是 returnValue 属性，默认为 true，当它设置为 false 时，就是取消事件默认行为，也是用 event 对象在事件函数中调用。
jQuery 中提供了 preventDefault () 方法来阻止元素的默认行为，只需要用 event 对象来调用就好，即 event.preventDefault ()
对于 a 链接，可以使用 javascript 伪协议来阻止默认行为
5. 编码实战
6. 扩展思考
冒泡和捕获同时存在时事件的触发顺序？
这里记被点击的 DOM 节点为 target 节点
1. 对于非 target 节点则先执行捕获在执行冒泡
2. 对于 target 节点则是先执行先注册的事件，无论冒泡还是捕获
7. 参考文献
8. 更多讨论
事件冒泡有什么作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情
【更多内容，可以加入IT交流群565734203与大家一起讨论交流】
【这里是技能树·IT修真院：IT修真院官网，初学者转行到互联网的聚集地】