这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 冒泡事件与事件捕获, 结合实例形式分析了 javascript 冒泡的原理与阻止冒泡的相关操作技巧, 需要的朋友可以参考下
本文实例分析了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0518/330180.html