JavaScript之事件的冒泡或事件捕获

最新推荐文章于 2022-08-21 11:30:18 发布

千年游隼

最新推荐文章于 2022-08-21 11:30:18 发布

阅读量121

点赞数

分类专栏： JavaScript 文章标签：事件的传播顺序 JavaScript 冒泡和捕获 JavaScript的事件监听

本文链接：https://blog.csdn.net/sun_hupo/article/details/89263088

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。
事件的第三个参数默认不写，就是false，是冒泡传播，若写true就是捕获传播。
如下例子是在div里面添加一个p标签。通过警告框的提示来判断事件的传播顺序。以及若何阻止这种传播。
a标签和表单是阻止事件传递的例子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				width: 300px;
				height: 300px;
				background-color: beige;
			}
			p{
				width: 200px;
				height: 200px;
				background-color: cadetblue;
			}
		</style>
	</head>
	<body>
		
		<div id="div1">
			<p id="p1"></p>
		</div>
		
			<a href="http://www.baidu.com" "return click1()">百度</a>
			
			<form action="" method="post" "return mysubmit()">
				<input type="text" name="username" placeholder="请输入用户名" />
				<input type="password" name="pwd" placeholder="请输入密码" />
				<input type="submit" value="提交"/>
			</form>
			
		<script type="text/javascript">
			div1.addEventListener("click",function(){
				alert("触发了div的click");
//				return false; 阻止默认行为
//				event.stopPropagation(); //停止传播（冒泡或捕获）
				
			},true);
			p1.addEventListener("click",function(){
				alert("触发了p的click");
//				event.stopPropagation();//停止传播  冒泡传播
			
			},true);
			
			function click1(){
				alert("你点击了a标签");
				return false;//在a标签里也要加return 这样才能阻止默认的传播行为
			}
			
			function mysubmit(){
				alert("马上要提交了");
				return false;//同上
			}
			
		</script>
	</body>
</html>

在这里插入图片描述
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。

千年游隼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript之事件的冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。事件的第三个参数默认不写，就是false，是冒泡传播，若写true就是捕获传播。如下例子是在div里面添加一个p标签。通过警告框的提示来判断事件的传播顺序。以及若何阻止这种传播。a标签和表单是阻止事件传递的例子。<!DOCTYPE html><html> <head> <me...
复制链接

扫一扫