事件冒泡与捕获详解-优快云博客

事件包括事件目标，事件捕获，事件冒泡。

事件捕获从外到内，事件冒泡从内到外。

事件目标即为我们要绑定事件的对象。

一般的obj.onclick=function(){}即为事件冒泡，即为右侧流程。对于子元素的点击事件，事件将会向外冒泡。如下例子：

<div class="div1">
       <div class="div2">
            <div class="div3"></div>
       </div>
</div>
  <script>
       var div1=document.getElementsByTagName('div')[0];
       var div2=document.getElementsByTagName('div')[1];
       var div3=document.getElementsByTagName('div')[2];
       div1.onclick=function(){
        alert('red');
   }
   div2.onclick=function(){
        alert('blue');
       }
       div3.onclick=function(){
        alert('yellow');
       }
   </script>

如果点击div3，将会依次输出yellow,blue,red.

点击div2，将会依次输出blue,red.

点击div1，将会输出red.

相对应的取消冒泡操作，可以使用e.cancelBubble=true来操作。更改代码如下：

       div1.onclick=function(){
        alert('red');
   }
       div2.onclick=function(ev){
        alert('blue')；

var e=window.event||ev;

e.cancelBubble=true; }

       div3.onclick=function(){
        alert('yellow');
       }

阻止冒泡后，点击div1，弹出yellow,blue，不再弹出red。

点击div2，弹出blue。

同时取消事件冒泡和事件捕获，采用e.stopPropagation().

一般事件的解绑操作，很简单。

div1.onclick=null;即把绑定在div1上的事件清空了。

事件捕获对应上图的左侧部分。是先于事件冒泡的。

此处要总结的一点是低版本IE只支持事件冒泡，不支持事件捕获。针对IE绑定多个事件时，采用的是obj.attachEvent('onclick',fn)只有两个参数，只支持事件冒泡。IE解除attachEventListener事件绑定，采用detachEvent('onclick',fn)，必须使用函数名，因为函数是引用类型，除非使用函数名指向同一函数，否则写一样的函数，实质是两个函数。无法进行移除操作。

而一般的浏览器，采用obj.addEventListener('click',fn,false)进行事件绑定。解除绑定采用的是obj.removeEventListener('click',fn,false)。addEventListener有一个神奇的第三个参数，可以为true或者false,我们先看false的效果，依然改变上述的代码

       div1.onclick=function(){
        alert('red');
   }
        div2.addEventListener('click',fn,false);
       function fn(ev){
        alert('blue');
        var e=window.event||ev;
       }