搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
JavaScript
JavaScript 教程
JavaScript基础教程
源代码
清空
点击运行
<!DOCTYPE html> <html> <title>JavaScript 捕获和冒泡事件传播示例 - 基础教程(div.cn)</title> <head> <style> div { background-color: lightgreen; padding: 25px; margin-bottom: 30px; border: 2px solid #000; font-size: 1.1em; } p { background-color: coral; padding: 30px; border: 2px solid #000; background: #fff; } </style> </head> <body> <div id="div1">捕获 <p id="p1">Click me</p> </div> <div id="div2">冒泡 <p id="p2">Click me</p> </div> <script> document.querySelector("#div1").addEventListener("click", myFunc, true); document.querySelector("#p1").addEventListener("click", myFunc, true); document.querySelector("#div2").addEventListener("click", myFunc, false); document.querySelector("#p2").addEventListener("click", myFunc, false); function myFunc() { alert("You clicked the: " + this.tagName + " element"); } </script> </body> </html>
运行结果