取消事件的捕获与冒泡
在浏览器发展到第四代时开发团队遇到一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？怎么理解这个问题，举个形象的例子，先在纸上画多个同心圆，然后把手指向圆心，那么问题来了，当前指的是哪个圆的圆心？
具体到我们在写JS事件的时候，先在body里面写一个有范围的div，然后在JS里面写div的onclick事件，同时也写上document的onclick事件，那么当我们点击div时，会发生什么，下面来看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>event</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="div">
</div>
<script type="text/javascript">
var oDiv=document.getElementById("div");
oDiv.onmousedown = function(ev) {
var oevent = ev || event;
console.log(1);
}
document.onmousedown = function(ev) {
var oevent = ev || event;
console.log(2);
}
</script>
</body>
</html>
那么我们点击看看打印了什么：
可以发现两个事件都触发了，因为现代的浏览器都支持事件冒泡，那么什么是事件冒泡，先看下面的图：
从这不难看出，打印1和2其实是有先后的，在这无论JS事件里面把两个点击事件怎么放顺序，都是先打印1后打印2，所以如果两个功能是冲突的（比如我们的div点击显示一个图，document点击事件是把这个图隐藏）就会达不到我们想要的效果（点击div显示，点击div以为的部分隐藏图），所以我们需要进行取消事件的捕获与冒泡（捕获事件与这类似，也有需要取消的时候），具体只需要在div事件里面加上：
event.stopPropagation()；
也就是：
<script type="text/javascript">
var oDiv=document.getElementById("div");
oDiv.onmousedown = function(ev) {
var oevent = ev || event;
console.log(1);
event.stopPropagation();
}
document.onmousedown = function(ev) {
var oevent = ev || event;
console.log(2);
}
</script>
得到结果：
这样就只执行了div的点击而不会向上冒泡执行document的点击，也就达到莱坞我们想要的效果。（注：event.stopPropagation()类型为只读的function,只有bubbles(表示事件是否冒泡）为true的时候才可以使用这个方法，单独取消冒泡为event.cancelBubble）