【前端】JavaScript入门及实战116-120

子非鱼921

已于 2024-08-02 09:27:43 修改

阅读量363

点赞数 3

分类专栏：【前端】JavaScript入门及实战（1-140）文章标签：前端 javascript 开发语言

于 2024-08-01 12:05:56 首次发布

本文链接：https://blog.csdn.net/weixin_45980065/article/details/140843880

版权

【前端】JavaScript入门及实战（1-140）专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章目录

116 事件的传播
117 拖拽（1）
118 拖拽（2）
119 测试IE8
120 拖拽（3）

116 事件的传播

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	
	<style type="text/css">
		#box1 {
			width: 300px;
			height: 300px;
			background-color: yellowgreen;
		}
			
		#box2 {
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
			
		#box3 {
			width: 150px;
			height: 150px;
			background-color: skyblue;
		}	
	</style>
	<script type="text/javascript">	
		window.onload = function(){				
			/*
				分别为三个div绑定单击响应函数
			*/
			var box1 = document.getElementById("box1");
			var box2 = document.getElementById("box2");
			var box3 = document.getElementById("box3");
			/*
				事件的传播：关于事件的传播网景公司和微软公司有不同的理解
					微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
				 	然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
							
					网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
					然后在向内传播给后代元素。
							
					W3C综合了两个公司的方案，将事件传播分成了三个阶段
					1.捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
					2.目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
					3.冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
				  
				如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
				一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
				  
				IE8及以下的浏览器中没有捕获阶段
			*/
				
			bind(box1,"click",function(){
				alert("我是box1的响应函数")
			});
			
			bind(box2,"click",function(){
				alert("我是box2的响应函数")
			});
			
			bind(box3,"click",function(){
				alert("我是box3的响应函数")
			});
		};
		
		function bind(obj , eventStr , callback){
			if(obj.addEventListener){
				// 大部分浏览器兼容的方式
				obj.addEventListener(eventStr , callback , true);
			}else{
				/*
					this是谁由调用方式决定
					callback.call(obj)
				*/
				// IE8及以下
				obj.attachEvent("on" + eventStr , function(){
					// 在匿名函数中调用回调函数
					callback.call(obj);
				});
			}
		}
	</script>	
</head>
<body>
	<div id="box1">
		<div id="box2">
			<div id="box3"></div>
		</div>
	</div>		
</body>
</html>

117 拖拽（1）

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	#box1 {
		width: 100px;
		height: 100px;
		background-color: red;
		position: absolute;
	}
	#box2{
		width: 100px;
		height: 100px;
		background-color: yellow;
		position: absolute;
		left: 200px;
		top: 200px;
	}			
</style>
<script type="text/javascript">
	window.onload = function(){
		/*
			拖拽box1元素
			拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
						2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
						3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
		*/
		
		// 获取box1
		var box1 = document.getElementById("box1");
		// 为box1绑定一个鼠标按下事件
		// 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
		box1.onmousedown = function(event){
			// 为document绑定一个onmousemove事件
			document.onmousemove = function(event){
				event = event || window.event;
				// 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
				// 获取鼠标的坐标
				var left = event.clientX;
				var top = event.clientY;
						
				//修改box1的位置
				box1.style.left = left + "px";
				box1.style.top = top + "px";
			};
			// 为document绑定一个鼠标松开事件
			document.onmouseup = function(){
				// 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
				// 取消document的onmousemove事件
				document.onmousemove = null;
				// 取消document的onmouseup事件
				document.onmouseup = null;
			};				
		};
	};
</script>
</head>
<body>
	<div id="box2"></div>
	<div id="box1"></div>
</body>
</html>

118 拖拽（2）

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	#box1 {
		width: 100px;
		height: 100px;
		background-color: red;
		position: absolute;
	}
	#box2{
		width: 100px;
		height: 100px;
		background-color: yellow;
		position: absolute;
		left: 200px;
		top: 200px;
	}			
</style>
<script type="text/javascript">
	window.onload = function(){
		/*
			拖拽box1元素
			拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
						2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
						3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
		*/
		
		// 获取box1
		var box1 = document.getElementById("box1");
		// 为box1绑定一个鼠标按下事件
		// 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
		box1.onmousedown = function(event){
			// 设置box1捕获所有鼠标按下的事件
			/*
				setCapture()
				只有IE支持，但是在火狐中调用时不会报错，
				而如果使用chrome调用，会报错
			*/
			/*if(box1.setCapture){
				box1.setCapture();
			}*/
			
			box1.setCapture && box1.setCapture();
			
			event = event || window.event;
			// div的偏移量 鼠标.clentX - 元素.offsetLeft
			// div的偏移量 鼠标.clentY - 元素.offsetTop
			var ol = event.clientX - box1.offsetLeft;
			var ot = event.clientY - box1.offsetTop;
			
			// 为document绑定一个onmousemove事件
			document.onmousemove = function(event){
				event = event || window.event;
				// 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
				// 获取鼠标的坐标
				var left = event.clientX - ol;
				var top = event.clientY - ot;
						
				//修改box1的位置
				box1.style.left = left + "px";
				box1.style.top = top + "px";
			};
			// 为document绑定一个鼠标松开事件
			document.onmouseup = function(){
				// 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
				// 取消document的onmousemove事件
				document.onmousemove = null;
				// 取消document的onmouseup事件
				document.onmouseup = null;
				// 当鼠标松开时，取消对事件的捕获
				box1.releaseCapture && box1.releaseCapture();
			};	
		
			/*
				当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
				此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
				如果不希望发生这个行为，则可以通过return false来取消默认行为
				
				但是这招对IE8不起作用
			*/
			return false;		
		};
	};
</script>
</head>
<body>
	<div id="box2"></div>
	<div id="box1"></div>
</body>
</html>

119 测试IE8

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	
</style>
<script type="text/javascript">
	window.onload = function(){
		// 分别为两个按钮绑定单击响应函数
		var btn01 = document.getElementById("btn01");
		var btn02 = document.getElementById("btn02");
				
		btn01.onclick = function(){
			alert(1);
		};
				
		btn02.onclick = function(){
			alert(2);
		};
				
		// 设置btn01对鼠标按下相关的事件进行捕获
		// 当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
		btn01.setCapture();
	};
</script>
</head>
<body>
	<button id="btn01">按钮01</button>
	<button id="btn02">按钮02</button>
</body>
</html>

120 拖拽（3）

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	#box1 {
		width: 100px;
		height: 100px;
		background-color: red;
		position: absolute;
	}
	#box2{
		width: 100px;
		height: 100px;
		background-color: yellow;
		position: absolute;
		left: 200px;
		top: 200px;
	}			
</style>
<script type="text/javascript">
	window.onload = function(){
		/*
			拖拽box1元素
			拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
						2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
						3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
		*/
		
		// 获取box1
		var box1 = document.getElementById("box1");
		var box2 = document.getElementById("box2");
		var img1 = document.getElementById("img1");
				
		// 开启box1的拖拽
		drag(box1);
		// 开启box2的
		drag(box2);
		drag(img1);
	};
	
	/*
		提取一个专门用来设置拖拽的函数
		参数：开启拖拽的元素
	*/
	function drag(obj){
		// 为box1绑定一个鼠标按下事件
		// 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
		obj.onmousedown = function(event){
			// 设置box1捕获所有鼠标按下的事件
			/*
				setCapture()
				只有IE支持，但是在火狐中调用时不会报错，
				而如果使用chrome调用，会报错
			*/
			/*if(box1.setCapture){
				box1.setCapture();
			}*/
			
			obj.setCapture && obj.setCapture();
			
			event = event || window.event;
			// div的偏移量 鼠标.clentX - 元素.offsetLeft
			// div的偏移量 鼠标.clentY - 元素.offsetTop
			var ol = event.clientX - obj.offsetLeft;
			var ot = event.clientY - obj.offsetTop;
			
			// 为document绑定一个onmousemove事件
			document.onmousemove = function(event){
				event = event || window.event;
				// 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
				// 获取鼠标的坐标
				var left = event.clientX - ol;
				var top = event.clientY - ot;
						
				//修改box1的位置
				obj.style.left = left + "px";
				obj.style.top = top + "px";
			};
			// 为document绑定一个鼠标松开事件
			document.onmouseup = function(){
				// 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
				// 取消document的onmousemove事件
				document.onmousemove = null;
				// 取消document的onmouseup事件
				document.onmouseup = null;
				// 当鼠标松开时，取消对事件的捕获
				obj.releaseCapture && obj.releaseCapture();
			};	
		
			/*
				当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
				此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
				如果不希望发生这个行为，则可以通过return false来取消默认行为
				
				但是这招对IE8不起作用
			*/
			return false;		
		};
	}
</script>
</head>
<body>
	<div id="box2"></div>
	<div id="box1"></div>
</body>
</html>

子非鱼921

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【前端】JavaScript入门及实战116-120

文章目录116 事件的传播117 拖拽（1）118 拖拽（2）119 测试IE8120 拖拽（3）116 事件的传播<!DOCTYPE html><html><head><title></title><meta charset="utf-8"> <style type="text/css"> #box1 { width: 300px; height: 300px; background-
复制链接

扫一扫