Day6_HTML+CSS+JS——事件冒泡

最新推荐文章于 2024-04-19 04:56:21 发布

Android_la

最新推荐文章于 2024-04-19 04:56:21 发布

阅读量132

点赞数

分类专栏： HTML+CSS+JS 文章标签： HTML+CSS+JS

本文链接：https://blog.csdn.net/qq_40634846/article/details/99305089

版权

HTML+CSS+JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一. 储备知识

事件的冒泡，其实就是事件的向上传导的过程。给有层级关系的标签绑定相同的事件，js中事件默认会冒泡。阻止事件的冒泡，就是return false;。

二. 例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="lib/jquery-1.7.2.js"></script>
<script type="text/javascript">
         //当页面中所有标签被加载完成后，立即调用
         $(function(){
        	 //获取span标签的jQuery对象并绑定处理函数
        	 $("span").click(function(){
        		 alert("内层的span被点击了...");
        		return false;//阻止事件的冒泡
        	 });
        	//获取指定id为content的jQuery对象并绑定处理函数
        	 $("#content").click(function(){
        		 alert("外层的div被点击了...");
        		 return false;//阻止事件的冒泡
        	 });
        	//获取body标签的jQuery对象并绑定处理函数
        	 $("body").click(function(){
        		 alert("body被点击了...");
        		 return false;//阻止事件的冒泡
        	 });
         });
</script>
</head>
<body>
       <div id="content" style="background:green">
            <span style="color:yellow">女神</span>
       </div>
</body>
</html>