JavaScript之冒泡和捕获事件

冒泡事件和捕获事件

css代码： 

#dv1 {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    #dv2 {
      width: 250px;
      height: 150px;
      background-color: green;
    }

    #dv3 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }

 html代码：

<!-- html内容 -->
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
<!-- js内容 -->
<script>
  //同时注册点击事件
  var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
  //遍历注册事件
  objs.forEach(function (ele) {
    //为每个元素绑定事件
    ele.addEventListener("click", function (e) {
      console.log(this.id+"====>"+e.eventPhase);
    }, true);
  });


  //该属性在事件参数对象中存在

</script>

div3（蓝） div2（绿） div1（红）是从内到外三个盒子模型

冒泡事件：点击div3盒子时，会从内到外依次触发事件div3->div2->div1

捕获事件：点击div3盒子时，会从外到内依次触发事件div1->div2->div3

一般默认都是冒泡阶段,很少用捕获阶段

 

如何阻止冒泡和捕获事件

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

也就是说： e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持，IE不支持

                    window.event.cancelBubble=true;谷歌,IE8支持，火狐不支持

（window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准，事件参数e在IE8的浏览器中是不存在,此时用window.event来代替）

 

html代码： 

<div id='div' onclick='alert("div");'>
    <ul onclick='alert("ul");'>
        <li onclick='alert("li");'>test</li>
    </ul>
</div>

上面的代码，Demo如下,我们单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。

js代码：

window.event? window.event.cancelBubble = true : e.stopPropagation();

解读：上面的代码是阻止冒泡行为。如果浏览器支持window.event（IE标准） ，是就执行window.event.cancelBubble=true否则执行 e.stopPropagation()，结果只会触发alert(“li”)。

 

默认行为

    默认行为指的是标签被触发时并发一个行为。例如 链接<a>的默认动作就是跳转到指定页面，提交按钮<input type=”submit”>就是传达表单的内容等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

如何取消默认行为

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

也就是说： e.preventDefault();阻止事件冒泡---->谷歌和火狐支持，IE不支持

                    window.event.returnValue=false;谷歌,IE8支持，火狐不支持

（window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准，事件参数e在IE8的浏览器中是不存在,此时用window.event来代替）

 

html代码：

<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>

js代码：

var a = document.getElementById("testA");
a.onclick =function(e){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        window.event.returnValue == false;
    }
}

 我们都知道，链接<a>的默认动作就是跳转到指定页面，上面的例子，就是阻止它的跳转。

 

return false

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

 

html代码:

<div id='div' onclick='alert("div");'>
    <ul  onclick='alert("ul");'>
        <li id='ul-a' onclick='alert("li");'>
            <a href="http://caibaojian.com/"id="testB">caibaojian.com</a>
        </li>
    </ul>
</div>

js代码：

var a = document.getElementById("testB");
a.onclick = function(){
    return false;
};

上面这个使用原生js，只会阻止默认行为，不会停止冒泡。即会依次弹出li>ul>div，但不会跳转到网址。

下面这个是使用jQuery，既阻止默认行为又停止冒泡

$("#testB").on('click',function(){
    return false;
});

总结方法

当需要停止冒泡行为时，可以使用

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

当需要阻止默认行为时，可以使用

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

参考文献：JS阻止冒泡和取消默认事件(默认行为)

课外知识：

我们知道注册事件可以使用

对象.addEventListener('click', function（）{}, false);

参数一：事件

参数二:事件执行函数

参数三：false为冒泡事件，true为捕获时间（默认填写false，没有理由）