w3c事件流 & ie事件流

w3c事件流:　　

　　　　从根文档(html)开始遍历所有子节点，如果目标事件的父节点设置为捕获时触发，则执行该事件，直到目标被执行，然后再事件冒泡(设置为捕获时触发的事件不再被执行)。

ie事件流:

　　　　从目标事件被执行，然后再冒泡父节点的事件，直到根文档。

 

捕获时触发事件:

<!DOCTYPE html>
<html>
    <head>
        <title>test event</title>
    </head>
    <body>
        <input id=btn1 type=button value=点击 />
    <script>
        (
            function(){
                var show1=function(str){
                    alert('1');
                }
                var show2=function(str){
                    alert('2');
                }
                var btn1=document.getElementById('btn1');
                btn1.addEventListener('click',show1,false);
                document.body.addEventListener('click',show2,true); //捕获时触发
            }
        )()

        //执行结果: 2、1
    </script>
    </body>
</html>

冒泡时触发:

<!DOCTYPE html>
<html>
    <head>
        <title>test event</title>
    </head>
    <body>
        <input id=btn1 type=button value=点击 />
    <script>
        (
            function(){
                var show1=function(str){
                    alert('1');
                }
                var show2=function(str){
                    alert('2');
                }
                var btn1=document.getElementById('btn1');
                btn1.addEventListener('click',show1,false);
                document.body.addEventListener('click',show2,false); //冒泡时触发
            }
        )()

        //执行节点: 1、2
    </script>
    </body>
</html>

 

posted @ 2013-02-26 15:47  microsoft_kk  阅读(2290)  评论(0)  编辑  收藏  举报