事件捕获（capture）和冒泡事件(Bubble)

最新推荐文章于 2024-04-05 13:33:40 发布

weixin_33693070

最新推荐文章于 2024-04-05 13:33:40 发布

阅读量627

点赞数

文章标签： javascript ViewUI

PS：这里是我从别人的博客中学习事件捕获和冒泡是的总结，如果你也感兴趣的话，建议你点击链接查看原博客的内容，他们写的都是很经典！

对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播的，就像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播还有个阶段，那就是捕获阶段，这个很少有用武之地，所以被人疏忽遗忘也在所难免了，不常用不代表它不存在，本着科学严谨的态度，我们有必要去看一下它的庐山真面目。

事件捕获

事实上，捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，和一个石子儿从水面向水底下沉一样，要说明的是在 IE，opera浏览器中，是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑，例如适用于ie,opera的attachEvent，有两个参数，attachEvent(”on”+type,fn)，而适用于所谓标准浏览器的addEventListener则有三个参数，addEventListener(type,fn,boolean)，前面两个参数不用解释，第三个参数boolean，就是决定注册事件发生在捕获阶段还是冒泡阶段，具体参考如下：

true : 捕获阶段

false : 冒泡阶段

<html>
<head>

<title>
</title>
<style type="text/css">
            *{margin:0px;padding:0px;}
            h1{text-align:center;color:#666;margin-top:18px;}
            #content{width:700px;height:250px;border:5px solid green;margin:20px auto;position:relative;}
            #obj1{height:100px;background:#d5d5d5;}
            #obj2{background:#777;}
            #obj3{position:absolute;top:200px;left:150px;width:200px;background:#555;}
            #obj4{height:100px;background:#999;margin-top:50px;}
            .active{color:#f00}
</style>


</head>
<body>
<h1>悟透事件的捕获和冒泡</h1>
<div id="content">
<div id="obj1">
<h2>元素a</h2>   
<div id="obj2">
<h2>元素b</h2>
<div id="obj3">
<h2>元素c</h2>
</div>
</div>
</div>
<div id="obj4">
<h2>元素d</h2>
</div>
</div>
<script type="text/javascript">
var divs=document.getElementById("content").getElementsByTagName("div");
var count=1;
for(var i=0;i<divs.length;i++){
             bindEvent(divs[i],"click",function(){
var obj=document.createTextNode("->"+count++);
this.getElementsByTagName("h2")[0].insertBefore(obj,null);
this.className="active";
                     });
         }
//取消冒泡事件
function stopBubble(e){
               e=e||window.event;  //firefox,chrome,etc.||IE,opera
if(e.stopPropagation){
                   e.stopPropagation();
                 }
else{
                  e.cancelBubble=true;
                 }
             }

//绑定事件
function bindEvent(elem,type,fn){
if(elem.attachEvent){
var typedRef="_"+type;
if(!elem[typedRef]){
                         elem[typedRef]=[];
                     }
for(var i in elem[typedRef]){
if(elem[typedRef][i]==fn){
return;
                             }
                         }
                         elem[typedRef].push(fn);
                         elem["on"+type]=function(){
for(var i inthis[typedRef]){
this[typedRef][i].apply(this,arguments);
                             }
                         }
                    }
else{
                       elem.addEventListener(type,fn,false);//改为true 就是捕获事件了
                     }
             }
</script>
</body>

</html>

取消冒泡事件
这时从《这里》看到的，然后自己打了一次代码加深印象的
在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

<html>
<head>
<title>
<style type="text/css">
                *{ margin:0px; padding:0px;}
</style>
</title>
</head>
<body>
<div id="obj1" style="width:500px;height:500px; background:#000;">
<div id="obj2" style="width:400px;height:400px; background:red;"></div>
</div>
<script type="text/javascript">
function stopBubble(e){
//如果传入了事件对象，那么就时非IE浏览器
if(e&&e.stopPropagtion){
                          e.stopPropagtion();
                         }
else{
                           window.event.canceBubble=true;
                         }
                 }
var obj1=document.getElementById_x_x('obj1');
var obj2=document.getElementById_x_x('obj2');
obj1.onclick=function(){
    alert('我点击了obj1');
}
obj2.onclick=function(e){
  alert('我点击了obj2');
  stopBubble(e);
}
</script>
</body>
</html>

weixin_33693070

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件捕获（capture）和冒泡事件(Bubble)

PS：这里是我从别人的博客中学习事件捕获和冒泡是的总结，如果你也感兴趣的话，建议你点击链接查看原博客的内容，他们写的都是很经典！对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播的，就像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播...
复制链接

扫一扫