JS冒泡事件与事件捕获

更新时间：2022-09-08 16:50:00

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如需转载请自行联系原作者

上一篇 : ：PHP命名空间带来的干扰下一篇 : js的一些常用判断小实验

JS冒泡事件与事件捕获

JS冒泡事件与事件捕获

案例

小结

再看一个更复杂的例子

小结

再次改造，阻止冒泡

小结

相关阅读

推荐文章

JS冒泡事件 与 事件捕获

JS冒泡事件 与 事件捕获

案例

小结

再看一个更复杂的例子

小结

再次改造，阻止冒泡

小结

相关阅读

推荐文章

JS冒泡事件与事件捕获

JS冒泡事件与事件捕获