您的位置：首页 > Web前端 > JavaScript

JavaScript中的事件流—捕捉和冒泡及取消冒泡事件

2009-12-16 23:09 337 查看

JavaScript中的事件流分为捕捉和冒泡

一、先通过实例1解下捕捉和冒泡事件

　　注意以下都是普通事件绑定方法：例如elem.onXX = function(){};普通事件绑定方法没有捕捉流发生

　　1.实例1

代码<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来说就是，执行上面四次事件的前两次，结果就是红色的方块显示出来。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航