如何阻止事件冒泡和默认行为？

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.编码实战
DEMO

6.扩展思考
冒泡和捕获同时存在时事件的触发顺序？

这里记被点击的DOM节点为target节点

1.对于非target节点则先执行捕获在执行冒泡
2.对于target节点则是先执行先注册的事件，无论冒泡还是捕获

7.参考文献
JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

JS中事件冒泡与捕获

8.更多讨论
事件冒泡有什么作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情
 
PPT
视频

 

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

这里是技能树.IT修真院：http://www.jnshu.com，初学者转行到互联网行业的聚集地。"

欢迎加IT交流群565734203与大家一起讨论交流