深入分析js的冒泡事件
更新时间：2014年12月05日 10:13:38 投稿：hebedich
本文通过几段示例代码，给我们深入分析了下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的冒泡事件了呢，有疑问就给我留言吧
相关文章
这篇文章主要介绍了JavaScript中的分号插入机制详细介绍,本文讲解JavaScript中各种情况下的分号插入机制,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了DOM基础教程之模型中的模型节点的相关资料,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JavaScript变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
下面小编就为大家带来一篇实现JavaScript的组成----BOM和DOM详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
JavaScript中的setUTCDate()方法使用详解
这篇文章主要介绍了JavaScript中的setUTCDate()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
在本篇文章里小编给大家分享的是关于JS中delete运算符的基础知识点，有需要的朋友们跟着学习下。2019-11-11
下面小编就为大家带来一篇原生javascript 学习之js变量全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
js onkeypress与onkeydown 事件区别详细说明
本文将详细介绍js onkeypress与onkeydown 事件区别:一个放开一个没有放开,onkeydown先于onkeypress 发生，需要的朋友可以参考下2012-12-12
这篇文章主要介绍了浅谈JavaScript的对象类型之function,函数（方法）是由事件驱动的或者当它被调用时执行的可重复使用的代码块,需要的朋友可以参考下2023-05-05
本文浅谈 JavaScript 编程中关于编码规范的问题，分析其中缘由。希望引起更多 Web 开发人员对 JavaScript 编码规范问题的关注和对软件产品质量问题的重视2011-10-10
最新评论