冒泡事件和捕获事件

image.png

addEventListener
默认为false
false事件冒泡
true事件捕获
事件冒泡

green.addEventListener("click",function(e){
    console.log("green:e.target");
    console.log(e.target);
    console.log("green:e.currentTarget");
    console.log(e.currentTarget);
});
red.addEventListener("click",function(e){
    console.log("red:e.target");
    console.log(e.target);
    console.log("red:e.currentTarget");
    console.log(e.currentTarget);
});
blue.addEventListener("click",function(e){
    console.log("blue:e.target");
    console.log(e.target);
    console.log("blue:e.currentTarget");
    console.log(e.currentTarget);
});

点击blue，返回结果：

image.png

点击red，返回结果：

image.png

事件捕获

green.addEventListener("click",function(e){
    console.log("green:e.target");
    console.log(e.target);
    console.log("green:e.currentTarget");
    console.log(e.currentTarget);
},true);
red.addEventListener("click",function(e){
    console.log("red:e.target");
    console.log(e.target);
    console.log("red:e.currentTarget");
    console.log(e.currentTarget);
},true);
blue.addEventListener("click",function(e){
    console.log("blue:e.target");
    console.log(e.target);
    console.log("blue:e.currentTarget");
    console.log(e.currentTarget);
},true);

点击blue，返回结果：

image.png

点击red，返回结果：

image.png

综上可以得出结论

image.png

1、事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标。
当你使用事件捕获时，父级元素先触发，子级元素后触发
冒泡阶段：事件从事件目标开始，往上冒泡直到页面的最上一级标签
当你使用事件冒泡时，子级元素先触发，父级元素后触发

2、IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera's 和 iCab两种都不支持。

3、target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段；只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。

4、event.stopPropagation()方法
阻止冒泡，不阻止默认事件（如果有存在链接，链接仍然会被打开）

5、event.preventDefault()方法
阻止默认事件，不阻止冒泡

6.return false
阻止冒泡，阻止默认事件
return false就等于同时调用了event.stopPropagation()和event.preventDefault()

    <div class="box">
        <a href="http://www.baidu.com">跳转到百度</a>
    </div>

//不阻止冒泡和默认事件
 $(".box").click(function(){
            alert(1);
  });

//阻止冒泡，不阻止默认事件
 $(".box a").click(function(event){  
     event.stopPropagation();             
 });
 $(".box").click(function(){
       alert(1);
 });

//阻止默认事件，不阻止冒泡
 $(".box a").click(function(event){            
     event.preventDefault();
  })                
 $(".box").click(function(){  
        alert("1")              
 });

//阻止冒泡和默认事件
 $(".box a").click(function(event){            
     event.preventDefault();
     event.stopPropagation(); 
  })                
 $(".box").click(function(){  
        alert("1")              
 });  
或者
 $(".box a").click(function(event){            
     return false
  })                
 $(".box").click(function(){  
        alert("1")              
 });

最后编辑于：2018.05.24 16:14:19