w3c事件流 & ie事件流

最新推荐文章于 2022-10-05 10:55:01 发布

joneywon

最新推荐文章于 2022-10-05 10:55:01 发布

阅读量289

点赞数

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>

joneywon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
w3c事件流 & ie事件流

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

扫一扫