这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文通过几段示例代码,给我们深入分析了下 javascript 的冒泡事件,非常的详细,这里推荐给大家,希望对大家有所帮助
在 javascript 的 dom 操作做肯定会遇到 js 的冒泡事件,最常见的是 div 弹窗事件如图解
当点击灰色部分是弹窗消失,点击黑色部分时没有效果。
通过下面一段代码来分析 js 的冒泡事件
html 代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- js冒泡事件
- </title>
- <link rel="stylesheet" href="style.CSS">
- </head>
- <body>
- <div class="container">
- <h1>
- js冒泡事件分析
- </h1>
- <hr>
- <div class="box bg-gray">
- <button class="btn">
- Click me !
- </button>
- </div>
- </div>
- <script>
- var box = document.querySelector(".box"),
- btn = document.querySelector(".btn");
- box.onclick = function(event) {
- alert("我是div");
- }
- btn.onclick = function(event) {
- alert("我是button");
- }
- </script>
- </body>
- </html>
使用 firefox 浏览器的默认开发者工具的 3d 视图可以清晰的看出 div 层的先后顺序
图解:
当点击按钮时会弹出 "我是 button" 再弹出 "我是 div", 因为先触发按钮事件之后触发下一层 div 点击事件,
事件的触发是先进先出原则。
图解:
那么有些时候我们并不想多个事件的触发而导致冲突,所以 event 有 stopPropagation(); 方法来阻止冒泡
还有一个 event 的方法也是比较常用的比如一个链接,点击链接时我不想跳转,则使用 event.preventDefault(); 方法
实例代码如下
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- js冒泡事件
- </title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <h1>
- js冒泡事件分析
- </h1>
- <hr>
- <div class="box bg-gray">
- <button class="btn">
- Click me !
- </button>
- <a href="http://www.liteng.org" id="link">
- 我是链接
- </a>
- </div>
- </div>
- <script>
- var box = document.querySelector(".box"),
- btn = document.querySelector(".btn");
- box.onclick = function(event) {
- alert("我是div");
- }
- btn.onclick = function(event) {
- alert("我是button");
- event.stopPropagation();
- }
- document.getElementById('link').onclick = function(event) {
- alert("我是link");
- event.preventDefault();
- }
- /*区分event.stopPropagation();和event.preventDefault();
- 前者使用stopPropagation()方法阻止事件冒泡
- 后者是阻止默认的行为比如阻止超链接
- */
- </script>
- </body>
- </html>
小伙伴们是否能够全面理解 js 的冒泡事件了呢,有疑问就给我留言吧
来源: http://www.phperz.com/article/17/0718/274129.html