002_javaScript中事件的冒泡（Bubble）

最新推荐文章于 2024-07-08 08:31:14 发布

_枸杞子_

最新推荐文章于 2024-07-08 08:31:14 发布

阅读量217

点赞数

分类专栏： JavaScript_积累版文章标签：事件冒泡 JavaScript

本文链接：https://blog.csdn.net/qq_33605778/article/details/76548287

版权

JavaScript_积累版专栏收录该内容

6 篇文章 0 订阅

订阅专栏

- 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。

- 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消

- 可以将事件对象的cancelBubble设置为true，即可取消冒泡

-例子：

元素.事件 =function(event){

event= event || window.event;

event.cancelBubble= true;

};

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style type="text/css">
			#box1 {
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			#s1 {
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function() {
				var box1 = document.getElementById("box1");
				var s1 = document.getElementById("s1");
				var body = document.body;
				
				/*
				 *  - 如此写法，点击span，会依次触发span、div、body、document。
				 *  - 事件的冒泡：某元素触发了x事件，其祖先的x事件会依次被触发。
				 *  - 事件的冒泡，看需求决定是否要取消。
				 *  - 取消事件冒泡：事件对象.cancleBubble = true;
				 */
				s1.onclick = function(event) {
					event = event || window.event;
					alert("span");
					event.cancelBubble = true;	//取消了span的事件冒泡，不会再传递给祖先
					
				}
				
				box1.onclick = function() {
					alert("div");
				}
				
				body.onclick = function() {
					alert("body");
				}
				
				document.onclick = function() {
					alert("document");
				}
			}
		</script>
		
	</head>
	<body>
		<div id="box1">
			div
			<span id="s1">span</span>
		</div>
	</body>
</html>