js中事件冒泡和事件捕获

原文地址：http://blog.csdn.net/dong123dddd/article/details/50660171

事件分为三个阶段：事件捕获 --> 事件目标 --> 事件冒泡

1、事件捕获捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

2、事件冒泡冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

3、捕获和冒泡过程图

JS捕获和冒泡过程图

不同的浏览器对事件的处理机制不同

两种模型以前，Netscape和Microsoft是不同的实现方式。 Netscape中，parent先触发，这就叫做事件捕获。 Microsoft中，child先触发，这就叫做事件冒泡。两种事件处理顺序刚好相反。IE只支持事件冒泡，Chrome,Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera’s 和 iCab两种都不支持。

W3C模型 W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

4、实际代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡和捕获测试</title>
    <style>
    
    div{width:80%;height: 80%;padding: 10%;position: relative;}
    #a{background: rgba(255,0,0,.6);}
    #b{background: rgba(0,255,0,.6);}
    #c{background: rgba(0,0,255,.6);}
    p{text-align: center; }
    </style>
</head>
<body>
    <div id="a">
        <p> this is a div</p>
        <div id="b">
            <p>this is b div</p>
            <div id="c">
                <p>this is c div</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
            var a = document.getElementById('a'),
                b = document.getElementById('b'),
                c = document.getElementById('c');
                
            //封装ie兼容函数，绑定事件
            //obj为要绑定事件的元素，ev为要绑定的事件，fn为绑定事件的函数
            function myAddEvent(obj,ev,fn){
            	
                if(obj.attachEvent){     //针对IE浏览器，事件前要加上"on"
                    obj.attachEvent('on'+ev,fn);
                }else{                   //针对FF与chrome
                    obj.addEventListener(ev,fn,true);
                    //当为true时采用事件捕获，当为false采用事件冒泡
                    //程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡。
                }
            }
            
            myAddEvent(a,'click',function(){ 
                alert('this is a div');
            });
            myAddEvent(b,'click',function(){ 
                alert('this is b div');
            });
            myAddEvent(c,'click',function(){ 
                alert('this is c div');
            });
            
        </script>
</body>
</html>

js中事件冒泡和事件捕获

猜你喜欢