javascript基础（事件的传播）（三十五）

最新推荐文章于 2022-04-08 08:24:39 发布

咸鸭蛋炒饭

最新推荐文章于 2022-04-08 08:24:39 发布

阅读量217

点赞数

分类专栏： HTML5基础篇文章标签： dom html javascript

本文链接：https://blog.csdn.net/u010853130/article/details/55100982

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.事件的传播：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color: deepskyblue;
			}
			
			#box2{
				width: 200px;
				height: 200px;
				background-color: cadetblue;
			}
			
			#box3{
				width: 100px;
				height: 100px;
				background-color: chocolate;
			}
			
		</style>
		
		<script type="text/javascript">
		
			function bind(obj , eventStr , callback){
				
				if(obj.addEventListener){
					//如果是正常浏览器
					obj.addEventListener(eventStr , callback , false);
				}else{
					//IE8
					obj.attachEvent("on"+eventStr , function(){
						callback.call(obj);
					});
				}
			}
			
			window.onload = function(){
				
				/*
				 * 事件的传播
				 * 	- 关于事件的传播微软和网景公司有着不同的理解
				 * 	- 微软公司，认为事件应该是从后代元素向祖先元素传播，即从里向外传播，也就是我们所谓事件的冒泡
				 * 	- 网景公司，认为事件应该是从祖先元素向后代元素传播，即从外向里传播，这一阶段我们称为事件的捕获
				 * 	- W3C综合了两个公司的方案,将事件的传播分成了三个阶段
				 * 		1.捕获阶段
				 * 			- 事件从最外层的元素（document），向目标元素进行事件的捕获
				 * 			- 此阶段默认不会触发事件
				 * 		2.目标阶段
				 * 			- 目标指的是触发事件的元素，捕获到目标元素则捕获阶段停止
				 * 		3.冒泡阶段
				 * 			- 事件从目标元素向祖先元素中冒泡，此时开始触发事件
				 * 			- 默认事件都是在冒泡阶段执行的
				 * 
				 * 	- 事件都是默认在冒泡阶段执行的，一般不需要在捕获阶段触发事件，
				 * 		如果希望在捕获阶段执行事件，则需要将addEventListener()的第三个参数修改为true
				 * 
				 * 	- IE8及以下的浏览器没有捕获阶段，也不能设置在捕获阶段触发事件
				 */
				
				//分别为三个div绑定单击响应函数
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				
				bind(box1,"click",function(){
					alert(1);
				})
				
				bind(box2,"click",function(){
					alert(2);
				})
				
				bind(box3,"click",function(){
					alert(3);
				})
				
			};
			
			
		</script>
	</head>
	<body>
		
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
		
	</body>
</html>

咸鸭蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript基础（事件的传播）（三十五）

1.事件的传播： #box1{ width: 300px; height: 300px; background-color: deepskyblue; } #box2{ width: 200px; height: 200px; background-color: cadetblue; }
复制链接

扫一扫