事件冒泡

最新推荐文章于 2021-11-28 20:49:46 发布

kriswu_sweetgirl

最新推荐文章于 2021-11-28 20:49:46 发布

阅读量189

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/kriswu_sweetgirl/article/details/79531150

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定义：当在有包含关系的DOM层级上绑定事件时，事件会按照DOM层级结构顺序从内到外依次触发,这就是“事件冒泡”。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡</title>
	<style type="text/css">
	    #parentDiv{
	    	width:400px;
	    	height:400px;
	    	background-color:#7FFF00;
	    }
	    #childDiv{
	    	width:200px;
	    	height:200px;
	    	background-color:yellow;
	    	margin:50px auto;
	    }
	</style>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	    $(function(){
             $("#parentDiv").bind("click",function(){
                    alert("parentDiv被点击了");
             });
             $("#childDiv").bind("click",function(event){
                    alert("childDiv被点击了");
                    event.stopPropagation();   // 停止事件冒泡    
             });
             $("body").bind("click",function(){
             	    alert("body被点击了");
             });
	    });
	</script>
</head>
<body>
	<div id="parentDiv">
	     这是parentDiv里的内容
         <div id="childDiv">
              这是childDiv里的内容
         </div>
         这是parentDiv里的内容
	</div>
    

</body>
</html>

p.s.代码说明：

a、style标签里面是定义的css样式
b、

 $("#parentDiv").bind("click",function(){
                    alert("parentDiv被点击了");
             });

给id=parentDiv的标签的click行为绑定一个匿名的function，一点击id=parentDiv的标签就会alert一句"parentDiv被点击了"

点击parentDiv部分会先弹出一句提示框“parentDiv被点击了”，确定后又弹出一个提示框“body被点击了”。因为parentDiv是在body里面的内容所以会先提示”parentDiv被点击了“，再提示“body被点击了”，这就是事件冒泡的现象。

但是点击childDiv就不会有这个现象，只会弹出一个提示框"childDiv被点击了",因为给他绑定click的时候，多写了一句：

event.stopPropagation();

这个方法是来停止冒泡事件的。所以对childDiv而言不会冒泡

kriswu_sweetgirl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录