JS冒泡事件与事件捕获实例详解

2024-05-06 16:33:09

字体：大中小

来源：转载

供稿：网友

本文实例分析了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

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

希望本文所述对大家JavaScript程序设计有所帮助。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：js事件源window.event.srcElement兼容性写法(详解)