目录
(1) 如何取消浏览器事件的传递与事件传递后浏览器的默认处理
一、事件模型
浏览器的事件模型主要分为三类：冒泡型事件、捕获型事件、DOM标准事件模型。下面我们来介绍一下这三类。
1.1 冒泡型事件(Bubbling)
从DOM树形结构上理解，就是事件由事件发生的叶子节点沿祖先节点一直向上传递直到根节点。
1.2 捕获型事件(Capturing)
该类型和冒泡型刚好相反，由DOM树最顶层元素一直到事件发生的叶子节点元素。
1.3 DOM标准事件模型
该事件模型即支持捕获型也支持冒泡型。它可以在一个DOM元素上绑定多个事件处理器，并且在处理函数的内部，this关键字仍然指向被绑定的DOM元素。
事件的传递首先是捕获式传递事件，接着是冒泡式传递。所以，如果一个处理函数即注册了捕获型事件的监听，又注册了冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。
二、事件对象
在IE浏览器中事件对象时window对象的一个属性，并且event对象只能在事件发生时被访问，事件处理完毕之后，该对象就消失了。而标准的DOM中规定event必须作为唯一的参数参给事件处理函数。故为了实现兼容性，通常采用下面的方法：
function Study(event){
if(window.event){
event = window.event;
}
}三、注册与移除事件监听器
1、IE下注册监听器与移除监听器
IE浏览器中的HTML元素有一个attachEvent()方法允许为指定对象注册多个事件监听器。例如：Elemt对象.attachEvent("onclick",observer)。
要移除先前注册的事件监听器，调用element的detachEvent()方法即可，参数相同。例如：Elemt对象.detachEvent("onclick",observer)。
2、DOM标准下注册监听器与移除监听器
DOM标准浏览器与IE浏览器中注册元素监听器的方式不同，它通过元素的addEventListener方法注册，该方法即支持注册冒泡型事件处理，又支持捕获型事件处理。语法如下所示：
Element对象.addEventListener("onclick",observer,useCapture)。
addEventListener()方法接受3个参数。第一个参数是事件名称，和IE不同的是，这里的事件名称不是以”on”开头的；第二个参数observer是回调处理函数；第3个参数注明处理回调函数实在事件传递过程中捕获阶段被调用还是冒泡阶段被调用，默认true为捕获阶段。
移除已注册的事件监听器调用Element的removeEventListener方法即可，参数不变。语法如下所示：
Element对象.removeEventListener("onclick",observer,useCapture)。
3、直接在DOM节点上加事件
(1) 如何取消浏览器事件的传递与事件传递后浏览器的默认处理
取消事件传递，是指停止捕获事件或冒泡型事件的进一步处理。例如，在冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。
事件传递后的默认处理，是指浏览器在事件传递并处理完后会执行与该事件关联的默认动作。
(2) 取消浏览器的事件传递
在IE浏览器中，通过设置event对象的cancelBubble为true即可。
Function someHandle(){
window.event.cancelBubble = true;
}DOM标准通过调用event对象的stopPropagation()方法即可
Function someHandle(){
event.stopPropagation();
}因此，为了实现跨浏览器的停止事件传递的方法是：
Function someHandle(event ){
event = event || window.event;
if(event.stopPropagation){
Event.stopPropagation();
}else{
Event.cancelBubble = true;
}
}(3) 取消事件传递后的默认处理
在IE下，通过设置event对象的returnValue为false即可。
Function someHandle(){
Window.event.returnValue = false;
}DOM标准通过调用event对象的preventDefault()方法即可
Function someHandle(){
Event.preventDefault();
}因此，跨浏览器的取消事件传递后的默认处理方法是：
Function someHandle(event ){
event = event || window.event;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}四、简单案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冒泡型和捕捉型事件</title>
<style type="text/css">
#wall{
width: 200px;
}#outer{
width: 150px;
}#inner{
width: 100px;
}#elemt{
width: 50px;
height: 50px;
}.Box{
background-color: white;
padding: 25px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 3px;
}
</style>
</head>
<body>
<div id="wall" class="Box">
<div id="outer" class="Box">
<div id="inner" class="Box">
<div id="elemt" class="Box"></div>
</div>
</div>
</div>
<button id="MaoPao">冒泡型事件</button>
<button id="BuHuo">捕获型事件</button>
<script type="text/javascript">
var MaoPao = document.getElementById('MaoPao');
var BuHuo = document.getElementById('BuHuo');
var styleObj = false;
MaoPao.onclick = function(){
styleObj = false;
Test(styleObj);
}
BuHuo.onclick = function(){
styleObj = true;
Test(styleObj);
}
//False为冒泡型号 ， True为捕获型
var elemt = document.getElementById('elemt');
var inner = document.getElementById('inner');
var outer = document.getElementById('outer');
var wall = document.getElementById('wall');
var Box = document.getElementsByClassName("Box");
var backList = ["#4F9AE4","#F26952","#00BBAA","#5F5F5F"];
//执行方法
Test(styleObj);
function Test(styleObj){
var num = 0;
elemt.addEventListener('click',function(){
Event(this,num++)
},styleObj);
inner.addEventListener('click',function(){
Event(this,num++)
},styleObj);
outer.addEventListener('click',function(){
Event(this,num++)
},styleObj);
wall.addEventListener('click',function(){
Event(this,num++)
},styleObj);
}
function Event(obj,num){
console.log(num)
obj.style.backgroundColor = backList[num];
}
</script>
</body>
</html>