javascript 之事件冒泡

最新推荐文章于 2024-09-30 15:23:15 发布

youknowml

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量85

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/yrhlyyouknow/article/details/107579637

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box1{
				width:100px;
				height:100px;
				background-color:green;
				
			}
			#s1{
				background-color:yellow;
				
			}
			</style>
			<script type="text/javascript">
				window.onload=function(){
					/* 事件的冒泡(Bubble)
					所谓的冒泡主要是指事件的向上传导
					当 后代元素上的事件被触发的的时候
					其祖先元素的  相同事件  也会被触发 */
					
					/* 在开发中大部分情况的冒泡都是有用的,如果不希望发生
					事件冒泡则可以通过事件对象来取消冒泡 */
					
					//为s1 来绑定一个单击响应函数
					var s1=document.getElementById("s1");
					s1.onclick=function(event){
						event=event||window.event;
						
						alert("我是span 的单击响应函数");
						event.cancelBubble=true;
						
					};
					//为box1 绑定一个单击响应函数
					var box1=document.getElementById("box1");
				box1.onclick=function(event){
					event=event||window.event;
						alert("我是div的单击响应函数");
						event.cancelBubble=true;
						
					};
					//为body 绑定一个单击响应函数
					document.body.onclick=function(){
						alert("我是body 的单击响应函数");
					};
					
					
				};
				</script>
			
	</head>
	<body>
		<div id="box1">
			我是box1；
			<span id="s1">我是span</span>
			</div>
		
	</body>
</html>