JavaScript中的事件流—捕捉和冒泡及取消冒泡事件
JavaScript中的事件流分为捕捉和冒泡
一、先通过实例1解下捕捉和冒泡事件
注意以下都是普通事件绑定方法：例如elem.onXX = function(){};普通事件绑定方法没有捕捉流发生
1.实例1
代码
<body>
<div id="outer">outer
<p id="inner">inner
<a href="#" id="btn">button</a>
</p>
</div>
<script type="text/javascript">
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var btn = document.getElementById('btn');
outer.onclick = function(){
this.style.color = 'red';
};
inner.onclick = function(){
this.style.color = 'blue';
};
btn.onclick = function(){
this.style.color = 'yellow';
};
</script>
</body>
<div id="outer">outer
<p id="inner">inner
<a href="#" id="btn">button</a>
</p>
</div>
<script type="text/javascript">
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var btn = document.getElementById('btn');
outer.onclick = function(){
this.style.color = 'red';
};
inner.onclick = function(){
this.style.color = 'blue';
};
btn.onclick = function(){
this.style.color = 'yellow';
};
</script>
</body>
捕捉事件：注意这里假设是dom事件绑定方法
把上面的代码复制到编辑器里，打开网页，点击链接(button),可以看到处在不同层次的字体颜色都变了，改变这些字体颜色的方法通过绑定到Dom元素上的click事件实现。有的人要问，我只点了链接，按道理来说只会触发绑定到链接(a)上的事件，也就是只会使链接的颜色变成设置的颜色(这里是黄色)，但是事实上这里触发了6个事件，前三个除了上面讲到的还包括绑定到最外层的div和次外层的p元素上的单击事件，后三个，下面会讲到。那触发的顺序是什么？可以这样理解，浏览器从最外层开始找那个点击的元素，同时在这个过程中开始执行绑定到外层元素上的事件(如果有绑定的话，如果没有的话，这里也没有必要讨论了)。在这个实例中就是，先触发outer.onclick>inner.onclick>btn.onclick。最终结果就是相当于设置了css：div#outer{color:red;} p#inner {color:blue;}a{color:yellow}，所以就呈现浏览器所示的现象。
冒泡事件：
在介绍捕捉事件是遗留下来的三个事件，这三个事件也就是在过程冒泡是里触发的。点击那个连接后，先触发捕捉事件，接着再以相反的顺序触绑定到元素上的事件。这个例子里就是btn.onclick>inner.onclick>outer.onclick。在这个例子里，大家可以看到冒泡事件似乎对我们的工作没有影响，但事情没有这么简单，接下去通过实例2了解取消冒泡事件。
二、实例2
代码<body>
<div id="pro" style="height:100px; width:100px;display:none; background-color:red;"></div>
<a href="#" id="button" style="width:50px; height:25px; margin-top:20px;line-height:25px; border:1px solid gray; padding:5px; background-color:#000000; color:#fff;">button</a>
<script type="text/javascript">
function stopBubble(e){
if(e && e.stopPropagation()){
// firefox ...
e.stopPropagation();
} else {
// ie
window.event.cancelBubble = true;
}
}
var pro = document.getElementById('pro');
var btn = document.getElementById('button');
btn.onclick = function(e){
if(pro.style.display != 'none'){
pro.style.display = 'none';
} else if (pro.style.display == 'none'){
pro.style.display = 'block';
}
// stopBubble(e);
};
document.onclick = function(){
pro.style.display = 'none';
};
</script>
</body>
<div id="pro" style="height:100px; width:100px;display:none; background-color:red;"></div>
<a href="#" id="button" style="width:50px; height:25px; margin-top:20px;line-height:25px; border:1px solid gray; padding:5px; background-color:#000000; color:#fff;">button</a>
<script type="text/javascript">
function stopBubble(e){
if(e && e.stopPropagation()){
// firefox ...
e.stopPropagation();
} else {
// ie
window.event.cancelBubble = true;
}
}
var pro = document.getElementById('pro');
var btn = document.getElementById('button');
btn.onclick = function(e){
if(pro.style.display != 'none'){
pro.style.display = 'none';
} else if (pro.style.display == 'none'){
pro.style.display = 'block';
}
// stopBubble(e);
};
document.onclick = function(){
pro.style.display = 'none';
};
</script>
</body>
同样在自己的浏览器里实验下，点击黑色的按钮，我们的本意是：点击黑色的按钮让隐藏的红色方块显示出来，然后通过点击黑色按钮或是点击页面上的其他地方来隐藏红色的方块。但是问题来了，点击黑色的按钮没有反应。为什么呢？通过上面讲到的方法来分析下，先是执行document.onclick(把红色方块影藏器来)，然后就是执行btn.onclick(把红色的方块显示出来)，在着使就是再次执行btn.onclick(把红色的方块隐藏)，最后就是执行document.onclick(把红色方块影藏了)，所以看上去就像没有反应一样，其实有反应的，只不过浏览器执行这些函数太快，肉眼分辨不了。如何让他符合我们要求的效果呢？只要修改下实例2的代码。把// stopBubble(e); 这句话前的"//"去掉，也就是取消注释。保存下，刷新下页面，我们要的效果达到了，这就是重点"阻止事件冒泡"。顾名思义，"阻止事件冒泡"就是让冒泡事件不发生。具体到实例2来说就是，执行上面四次事件的前两次，结果就是红色的方块显示出来。
