zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    第一阶段个人总结02
    第二阶段冲刺第十天
    第二阶段冲刺第九天
    第二阶段冲刺第八天
    第二阶段冲刺第七天
    第二阶段冲刺第六天
    第二阶段冲刺第五天
    第二阶段冲刺第四天
    第十六周总结
    第二阶段冲刺第三天
  • 原文地址:https://www.cnblogs.com/BigIdiot/p/2933692.html
Copyright © 2011-2022 走看看