JS冒泡事件 与 事件捕获

JS冒泡事件 与 事件捕获

案例

<!DOCTYPE html>
<html>
<head>
    <title>冒泡事件</title>
    <script type="text/javascript">
    
        window.onload = function(){
            window.onclick = function(){
                alert("Window"); // *
            };
            
            document.onclick = function(){
                alert("Document"); // 次*
            };
            
            document.documentElement.onclick = function(){
                alert("Html"); // 次次*
            };
            
            document.body.onclick = function(){
                alert("Body"); // 次次次*
            };
            document.getElementById("myDiv").onclick = function(){
                alert("Div"); // 最先执行,并且会传递到上一层。点击两次,则按顺序执行两次。如果上级也有点击事件的话
            };
        }
    

    </script>
</head>
<body>
    <div id="myDiv">点我</div>
</body>
</html>

小结

1.点击myDiv。依次是Div-Body-Html-Document-Window

2.点击其他空白地方。依次是Html-Document-Window

3.连续点击两次,会按顺序执行两次

4.冒泡的前提是,父级也定义了相应的事件

再看一个更复杂的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件捕捉</title>
    <script type="text/javascript">
    
        window.onload = function(){
            window.addEventListener("click", function(){
                alert("Window - true");
            }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
            
            document.addEventListener("click", function(){
                alert("Document - true");
            }, true);
            
            document.documentElement.addEventListener("click", function(){
                alert("Html - true");
            }, true);
            
            document.body.addEventListener("click", function(){
                alert("Body - true");
            }, true);
            document.getElementById("myDiv").addEventListener("click", function(){
                alert("Div - true");
            }, true);

            window.addEventListener("click", function(){
                alert("Window - false");
            }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

            document.addEventListener("click", function(){
                alert("Document  - false");
            }, false);

            document.documentElement.addEventListener("click", function(){
                alert("Html  - false");
            }, false);

            document.body.addEventListener("click", function(){
                alert("Body  - false");
            }, false);
            document.getElementById("myDiv").addEventListener("click", function(){
                alert("Div  - false");
            }, false);

            window.onclick = function(){
                alert("Window - click"); // *
            };

            document.onclick = function(){
                alert("Document - click"); // 次*
            };

            document.documentElement.onclick = function(){
                alert("Html - click"); // 次次*
            };

            document.body.onclick = function(){
                alert("Body - click"); // 次次次*
            };
            document.getElementById("myDiv").onclick = function(){
                alert("Div - click"); // 最先执行,并且会传递到上一层。点击两次,则按顺序执行两次。如果上级也有点击事件的话
            };
        }
    

    </script>
</head>
<body>
    <div id="myDiv">点我</div>
    
</body>
</html>

小结

1.点击的执行结果是

Window - true

Document - true

Html - true

Body - true

Div - true


Div - false

Div - click


Body - false

Body - click


Html - false

Html - click


Document - false

Document - click


Window - false

Window - click

2.顺序与js代码顺序无关

3.就算没有定义点击事件,一样可以捕获点击事件,只要点击到,就能捕获到

再次改造,阻止冒泡

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件捕捉</title>
    <script type="text/javascript">
    
        window.onload = function(){
            document.addEventListener("click", function(){
                alert("Document - true");
            }, true);

            window.addEventListener("click", function(){
                alert("Window - true");
            }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行


            document.documentElement.addEventListener("click", function(){
                alert("Html - true");
            }, true);
            
            document.body.addEventListener("click", function(){
                alert("Body - true");
            }, true);
            document.getElementById("myDiv").addEventListener("click", function(){
                alert("Div - true");
            }, true);

            window.addEventListener("click", function(){
                alert("Window - false");
            }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

            document.addEventListener("click", function(){
                alert("Document  - false");
            }, false);

            document.documentElement.addEventListener("click", function(){
                alert("Html  - false");
            }, false);

            document.body.addEventListener("click", function(){
                alert("Body  - false");
            }, false);
            document.getElementById("myDiv").addEventListener("click", function(){
                alert("Div  - false");
            }, false);

            window.onclick = function(){
                alert("Window - click"); // *
            };

            document.onclick = function(){
                alert("Document - click"); // 次*
            };

            document.documentElement.onclick = function(){
                alert("Html - click"); // 次次*
            };

            document.body.onclick = function(){
                alert("Body - click"); // 次次次*
            };
            document.getElementById("myDiv").onclick = function(){
                alert("Div - click"); // 最先执行,并且会传递到上一层。点击两次,则按顺序执行两次。如果上级也有点击事件的话
                event.stopPropagation(); // 阻止冒泡
            };
        }
    

    </script>
</head>
<body>
    <div id="myDiv">点我</div>
    
</body>
</html>

小结

Window - true

Document - true

Html - true

Body - true

Div - true


Div - false

Div - click

终止了,没有后续的内容了



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5960221.html,如需转载请自行联系原作者

上一篇:为什么阿里巴巴不建议在for循环中使用”+”进行字符串拼接


下一篇:Actionscript Flash Event.ENTER_FRAME 延迟间隔非常大 并且 pre-render 耗时非常严重