JS笔记第七期（事件、事件传播、拖拽、滚轮事件、键盘事件）+图片切换练习

转晴喵

已于 2024-07-25 13:06:08 修改

阅读量434

点赞数 15

文章标签：笔记 javascript 前端

于 2024-07-25 12:43:51 首次发布

本文链接：https://blog.csdn.net/th891166/article/details/140686273

版权

一、事件

1、事件对象(event)
       当事件的响应函数被触发时，浏览器每次都会将事件对象作为实参传递进响应函数
       clientX/clientY;获取鼠标指针在当前的可见窗口的水平、垂直坐标
       -pageX/pageY -获取的是鼠标相对于当前页面的坐标 IE8不支持

代码示例（当鼠标停留在div里面我们可以获取到鼠标的坐标）：

window.onload=function(){
			 //当鼠标在div中移动时，显示鼠标的位置 
 var areaDiv=document.getElementById("areaDiv");
 var showMsg=document.getElementById("showMsg");
areaDiv.onmousemove=function(event){
			//在showMsg显示鼠标坐标
			 var x = event.clientX;
			var y = event.clientY;
			showMsg.innerHTML=("x = " + x + ", y = " + y);
		};

		};

2、事件冒泡（Bubble）
           -指的是事件的向上传导，后代元素的事件被触发时，祖先元素的相同事件也会被触发
           -在开发中还是有用的
           -不想要时可以取消冒泡事件对象.cancelBubble=true;

3、事件委派
-将事件统一绑定给元素共同的祖先元素，这样当后代元素的事件被触发时，一定会冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
-事件的委派利用了冒泡，通过委派可以减少事件绑定次数，提高程序性能

代码示例：

window.onload=function(){
 var u1=document.getElementById("ul");
		   var btn01=document.getElementById("btn01");
		   btn01.onclick=function(){
			   //创建一个li
			   var li=document.createElement("li");
			   li.innerHTML="<a href='javascript:;'>新增的超链接</a>";
			   //将新增超链接添加到ul中
			   u1.appendChild(li);*/
		   }; /*这里为每一个超链接都绑定了一个单击响应函数 ，
		   操作麻烦，并且只能为已有的进行设置，新添加的必须重新绑定
		   var allA=document.getElementsByTagName("a");
		   for(var i=0;i<allA.length ;i++){
			   allA[i].onclick=function(){
				   alert("我是单击响应函数");
			   };
		   }
 ul.onclick=function(event){
event=event||window.event;
event=event||window.event;
 if(event.target.className=="link"){
	alert("哈哈哈哈哈哈哈哈哈哈");
 }
			  
 }
};

event=event||window.event;

这段代码是用于确保在不同浏览器中都能正确获取到事件对象的常见做法。
-如果 event 参数已经定义了（即在现代浏览器中），就直接使用它。
-如果 event 没有定义（即在IE浏览器中），则尝试使用 window.event 来获取事件对象。

4、事件绑定
       addEventListener();
       -通过这个函数为元素绑定响应函数
       -参数 addEventListener("click",function(){},false); 最后一个参数表示是否在捕获阶段触发事件，一般为false
       -可以为一个元素绑定多个响应函数不会被覆盖，当事件被触发时会根据绑定顺序依次执行

示例代码：

window,onload=function(){
var btn01=document.getElementById("btn01");
		btn01.addEventListener("click",function(){},false);
		};

要用到的HTML代码：

<div id="areaDiv" style="width: 200px;height: 200px;background-color: aqua;border: solid #000000 2px;"></div>
		<br />
		<div id="showMsg" style="width: 200px;height: 100px;border: #000000 2px solid;"></div>
		<button id="btn01">添加超链接</button>
		<ul id="ul">
			<li>
				<p>这是一个p标签</p>
			</li>
			<li><a href="#" class="link">超链接一</a></li>
			<li><a href="javascript:;"class="link">超链接二</a></li>
			<li><a href="javascript:;"class="link">超链接三</a></li>

二、事件传播

事件传播
       -捕获阶段，从外层最祖先元素向目标元素进行事件捕获，但是默认此时不会触发事件
       -目标阶段，事件捕获到目标元素，捕获结束开始在目标元素上触发事件
       -冒泡阶段，事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件传播</title>
		<style type="text/css">
		#box1{
			width: 500px;
			height: 500px;
			background-color: #5F9EA0;
		}
		#box2{
			width: 400px;
			height: 400px;
			background-color: #F5F5DC;
		
		}
		#box3{
			width: 300px;
			height: 300px;
			background-color: brown;
		
		}
		</style>
	<script type="text/javascript">
	window.onload=function(){
	  	var box1=document.getElementById("box1");
		var box2=document.getElementById("box2");
		var box3=document.getElementById("box3");
		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,false);
			}else{
				obj.attachEvent("on"+eventStr,function(){
					callback.call(obj);
				});
			}
		}
		
	};
	
	</script>
	
	</head>
	<body>
		<div id="box1">box1
			<div id="box2">box2
				<div id="box3">
					box3
				</div>
			</div>
		</div>
	</body>
</html>

三、拖拽

1、拖拽box1元素
       -当鼠标在被拖拽元素上按下时开始拖拽 onmousedown
       -元素随着鼠标移动而移动onmousemove
       -鼠标松开时，被拖拽元素留在原地onmouseup

2、div的偏移量鼠标.clentX-元素.ooffsetLeft
3、div的偏移量鼠标.clentY-元素.ooffsetTop

4、拖拽网页内容时候，浏览器默认去搜索引擎中搜索，此时会导致拖拽功能异常，
若不希望发生这个行为，可以通过return false；来取消。对ie8不起作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件拖拽</title>
		<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: #A52A2A;
			position: absolute;
		}
		#box2{
			width: 100px;
			height: 100px;
			background-color: #5F9EA0;
			left: 500px;
			top: 200px;
			position: absolute;
		}
		
		</style>
		<script type="text/javascript">
		window.onload=function(){
	     var box1=document.getElementById("box1");
		 var box2=document.getElementById("box2");
		 var img1=document.getElementById("img1");
		 //点击开始拖拽
		drag(box1);
		drag(box2);
		drag(img1);
		};
		function drag(obj){
			 obj.onmousedown=function(event){
		event=event||window.event;	 
	
		var ol=event.clientX-obj.offsetLeft;
		var ot=event.clientY-obj.offsetTop;
		//元素随着鼠标移动
		document.onmousemove=function(event){
			event=event||window.event;//确保浏览器正确获取对象
			 var left=event.clientX-ol;
			 var top=event.clientY-ot;
			 //修改box1位置
			 obj.style.left=left+"px";
			 obj.style.top=top+"px";
		 };
		 //鼠标松开时，被拖拽元素停在原位置 
		 document.onmouseup=function(){
			document.onmousemove=null;
			document.onmouseup=null;
		//取消事件onmousemove，onmouseup，因为当鼠标松开之后这个事件都没有任何存在的意义了
		 };
		 return false;
		 };
		}
		</script>
	</head>
	<body>
		我是猪猪吧！！
		<div id="box1"></div>
		<div id="box2"></div>
		<img  src="img/6.jpg" id="img1" style="position: absolute;"/>
	</body>
</html>

四、滚轮事件

当滚动条滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，若不希望发生则：return false;取消.

event.wheelDelta 获取鼠标滚动方向，若值大于零则向上滚动，若值小于零则向下滚动

示例代码（鼠标上滚box1长度增加，下滚长度缩短）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标滚轮事件</title>
		<style type="text/css">
		#box1{
			width: 200px;
			height: 200px;
			background-color: #A52A2A;
		}
		
		</style>
		<script type="text/javascript">
		window.onload=function(){
		/* 
		当鼠标向下滚动时，box1边长
		 向上滚动时box1变短
		 */
		var box1=document.getElementById("box1");
		/* 绑定鼠标滚动事件 
		onmousewheel
		 -在鼠标滚动时触发
		
		*/
		box1.onmousewheel=function(event){
			event=event||window.event;
			//判断鼠标滚轮的方向   wheelDelta-获取滚动方向
			if(event.wheelDelta>0){
				//向上滚
				box1.style.height=box1.clientHeight-10+"px";
			}else{
				//向下滚
				box1.style.height=box1.clientHeight+10+"px";
			}
			/* 
			当滚动条滚动时，如果浏览器有滚动条，滚动条会随之滚动
			 这是浏览器的默认行为，若不希望发生则取消
			 */
			return false;
		};
			
		};
		</script>
	</head>
	<body style="height: 2000px;">
		<div id="box1"></div>
	</body>
</html>

五、键盘事件

1、键盘事件-一般绑定给一些可以获取焦点的对象或者document
2、 onkeydown
-按键按下
-如果一直按着某个按键不松手，则会一直触发，连续触发时第一次和第二次之间间隔时间较长，后续的很快（防止误操作）

3、onkeyup
-按键松开

4、通过keyCode获取按键编码，可以判断是哪一个按键被按下
例如：判断是否是a被按下

if(event.keyCode==65){
					console.log("A!");
				}

5、 altKey\ctrlKey\shiftKey
-用于判断这三个键是否被按下，若是则返回true

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
		 <script type="text/javascript">
		 
		 window.onload=function(){
	
			document.onkeydown=function(event){
				event=event||window.event;
				
				//console.log(event.keyCode);
				if(event.keyCode==65){
					console.log("A!");
				}
				
				};
				var input=document.getElementsByTagName("input");
				input.onkeydown=function(event){
					event=event||window.event;
				/* 
				在文本框中输入内容属于onkeydown的默认行为
				 若不需要则取消
				 */
				return false;
			};
		 };
		 </script>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

六、图片切换练习

点击按钮切换图片，就是修改图片的src属性
       ！！！！！！
       作者这里的易错点：
       请注意代码是按照顺序执行的，先判断对错再赋值或者修改，否则会造成错误

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换练习</title>
		<link  rel="stylesheet" type="text/css" href="./css/pageText.css"/>
	<script type="text/javascript">
		window.onload=function(){
		/* 
		 
		 */	
		//创建一个索引以便获取地址
		var index=0;
		//获取第几张图片提示 iofo对象
	    var info=document.getElementById("info");
		//显示初始第一张
	    info.innerHTML="第"+1+"张"; 
		//获取两个按钮对象
		var prev=document.getElementById("prev");
		var next=document.getElementById("next");
		//获取img的标签对象
		var img=document.getElementsByTagName("img")[0];
		//创建一个数组保存图片路径
		var imgArry=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
		
		prev.onclick=function(){
			//图片切换到上一张，索引自减
			index--;
			//如果索引自减到小于数组最小索引就重置为数组最大索引
			 if(index<0){
				index=imgArry.length-1; 
			 }
			 //索引正确之后再修改src属性值
			img.src=imgArry[index];
			//显示现在是第几张图片
			info.innerHTML="第"+(index+1)+"张";
		};
		next.onclick=function(){
			//图片切换到下一张，索引自增
			index++;
			//如果索引自增的超过了数组最大索引，重置为0
			if(index>imgArry.length-1){
				index=0;
			}
			//再重新修改src属性值
			img.src=imgArry[index];
			//每点击一次都应该重新设置
		    info.innerHTML="第"+(index+1)+"张";
		}
		};
	</script>
	
	
	</head>
	<body>
		<div id="outer" class="box1">
			<img src="img/1.jpg" alt="玩具1"/>
			<br />
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			<p id="info"></p>
		</div>
	</body>
</html>

img文件：

运行效果：

以上就是本次的全部内容，欢迎留言交流~~

转晴喵

关注

15
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS笔记第七期（事件、事件传播、拖拽、滚轮事件、键盘事件）+图片切换练习

将事件统一绑定给元素共同的祖先元素，这样当后代元素的事件被触发时，一定会冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。当滚动条滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，若不希望发生则：return false;-指的是事件的向上传导，后代元素的事件被触发时，祖先元素的相同事件也会被触发。-冒泡阶段，事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。-目标阶段，事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
复制链接

扫一扫