JS冒泡事件与事件捕获实例详解
网络编程 2021-07-04 19:19www.168986.cn编程入门
这篇文章主要介绍了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.sPropagation(); // 阻止冒泡 }; } </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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程