JS html事件冒泡和事件捕获操作示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS html事件冒泡和事件捕获操作示例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2008字,纯文字阅读大概需要3分钟。
内容图文
![JS html事件冒泡和事件捕获操作示例](/upload/InfoBanner/zyjiaocheng/333/90b75edd80d0418186abd26979fecc98.jpg)
本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考,具体如下:
今天学习了事件冒泡和捕获,记录一下。
1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
我一般用法就是理解为触发事件A, 会触发A的父亲,爷爷,爷爷的父亲......
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击事件捕获冒泡实验</title> </head> <body> <div id="grandPa"> <div id="father"> <div id="son"> <input type="button" value="click"/> </div> </div> </div> <script type="text/javascript"> var father = document.getElementById('father'); father.addEventListener('click',function () { alert('fattther'); }) var son = document.getElementById('son'); son.addEventListener('click',function () { alert('son'); }); </script> </body> </html>
点击button,会以此弹出"son", "father"。
2.捕获事件:使用事件捕获时,父级元素先触发,子级元素后触发。
我们使用addEventListener添加监听事件时,参数分别为(事件类型, function(){}, capture), 一般不写第三个参数时默认为false,即事件冒泡。
所以1中的代码会是事件冒泡顺序。如果我们想改为事件捕获,把参数设置为true即可,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击事件捕获冒泡实验</title> </head> <body> <div id="container"> <div id="father"> <div id="son"> <input type="button" value="click"/> </div> </div> </div> <script type="text/javascript"> var father = document.getElementById('father'); father.addEventListener('click',function () { alert('fattther'); },true) var son = document.getElementById('son'); son.addEventListener('click',function () { alert('son'); }); </script> </body> </html>
这样当你点击button后就会以此弹出"father", "son"了。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的JS html事件冒泡和事件捕获操作示例全部内容,希望文章能够帮你解决JS html事件冒泡和事件捕获操作示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。