JS学习日记--事件

最新推荐文章于 2023-04-20 10:10:56 发布

风华正茂呀

最新推荐文章于 2023-04-20 10:10:56 发布

阅读量179

点赞数

分类专栏： JS学习日记文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104024956

版权

JS学习日记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.事件基础

JavaScript事件是由访问Web页面的用户引起的一系列操作，当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等

2.事件处理函数

javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。所有的事件处理函数都会有两个部分组成，on+事件名称

注：事件对象

当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其他与特定事件相关的信息。通过事件绑定的执行函数是可以得到一个隐藏参数的说明，浏览器会自动分配一个参数，这个参数就是event对象。
event常用属性：e.clientX,e.pageX,e.offsetX
具体三种区分如下：
console.log(event.clientX,event.clientY);//可视页面边距
console.log(event.pageX,event.pageY);//页面边距
console.log(event.offsetX,event.offsetY);//点击区域边距
以及实例 :输出当前鼠标的坐标

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>case</title>
		
		   <script type="text/javascript">
			 
		   	window.onload=function()
			{
				oSpan=document.getElementsByTagName("span")[0];
				oDiv=document.getElementById("div1");
				oDiv.onmousemove=function()
				{
					oSpan.innerHTML=event.clientX+","+event.clientY+"px";
					
					}
					oDiv.onmouseleave=function()
					{
						oSpan.innerHTML="";
					}
			}
		   </script>
			<style type="text/css">
				#div1{
					position: relative;
					width: 600px;
					height: 600px;
					background-color: #FF0000;
				}
				span{
					position: absolute;
					width: 80px;
					height: 20px;
					bottom:0;
					background-color: aliceblue;
				}
			</style>
	</head>
	<body>
		<div id="div1">
			<span></span>
		</div>
	</body>
</html>

<1>鼠标事件

函数	解释
onclick	鼠标单击
onmouseover	双击
onmousedown	按下
onmouseup	松开
ondblclick	双击
onmousemove	移动
onmouseout	离开范围

<2>键盘事件

函数	解释
onkeydown	按下任意键触发
onkeypress	字符键触发
onkeyup	抬起触发

键盘事件有三个属性：altKey、ctrKey、shiftKey，分别对应这三个键，是否被按下，以及keycode函数，可以用来检测是否按下某个键
实例：把文本框内输入的内容提交到div中，用点击按钮和点击enter键两种方式都可提交。
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>键盘事件</title>
		<style type="text/css">
			div{
				width: 600px;
				height: 600px;
				border: 1px solid #800080;
				
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				oDiv=document.getElementsByTagName("div")[0];
				oBtn=document.getElementsByTagName("input");
				oBtn[1].onclick=function()
				{
					
					oDiv.innerHTML+=oBtn[0].value;
				}
				document.onkeydown=function()
				{
					if(event.keyCode==13)
					{
						oDiv.innerHTML+=oBtn[0].value;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<input type="text" />
		<input type="button" name="" id="" value="提交" />
	</body>
</html>

3.事件流

事件流描述的是页面接收事件的顺序
事件流的三个阶段:捕获，目标，冒泡
事件委托机制：利用事件冒泡的原理，把本应添加给某元素上的事件委托给他的父级（外层）
捕获：从最不特定到最特定（从外到内）
冒泡：从最特定到最不特定（从内到外）
【注】：可以通过函数来阻止冒泡，即本来会一层一层的冒泡输出，但是通过阻止冒泡，可以让他在某一层知乎不再输出
阻止冒泡函数：
evt.cancelBubble=true;
evt.stopPropagation();
下面是一个事件委托的例子：让新加入的标签也可以拥有事件属性

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>事件委托</title>
		<script type="text/javascript">
			window.onload=function()
			{
				var oUl=document.getElementsByTagName("ul")[0];
				var oLi=document.getElementsByTagName("li");
				oUl.onclick=function()
				{
					if(event.srcElement.nodeName.toUpperCase()=="LI"){
						console.log(event.srcElement.innerHTML);
					}
					
				}
				for (var i=0;i<5;i++) {
					var oLi=document.createElement("li");
					oLi.innerHTML=i+1;
					oUl.appendChild(oLi);
					
				}
			}
		</script>
		<style type="text/css">
			li{
				margin: 20px;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>

4.事件阻止函数

浏览器的默认行为：
JavaScript事件本身所具有的属性，如a标签的跳转，Submit按钮的提交右键菜单，文本框输入等。
阻止默认行为的方式
event.preventDefault();
event.returnValue=false;
return false
代码如下：

 window.onload=function()
			   {
				   var a=document.getElementsByTagName("a")[0];
				   a.onclick=function()
				   {
					   console.log("aaaa");//默认会刷新页面
					   return false;
				   }
			   }
			   //右键菜单：oncontextmenu;

5.dom2级事件

添加事件监听器：addEventListener(事件名，处理函数，布尔值)//false冒泡true捕获
移除事件监听器：removeEventListener(事件名，处理函数)
IE下事件监听器：attachEvent(事件名，处理函数) detachEvent(事件名，处理函数)
【注】：普通事件在同一个对面上添加两个相同的事件，后添加的会把先添加的覆盖，而dom2级会把两个都输出
【注】：经试验上面的也可以在新版ie下使用，不适用的应该只是ie8以前的ie
示例代码:

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>DOM2级事件</title>
		<script type="text/javascript">
			/*
				添加事件监听器：addEventListener(事件名，处理函数，布尔值)//false冒泡true捕获
				移除事件监听器：removeEventListener(事件名，处理函数)
				IE下事件监听器：attachEvent(事件名，处理函数)
							   detachEvent(事件名，处理函数)
			*/
				//普通事件在同一个对面上添加两个相同的事件，后添加的会把先添加的覆盖
				//而这个会输出两个
				window.onload=function()
				{
					var oDiv1=document.getElementById("div1");
					var oDiv2=document.getElementById("div2");

					oDiv1.addEventListener("click",aaa,false);
					
					oDiv2.addEventListener("click",bbb,false);
					function aaa()
					{
						console.log("outer");
					}
					function bbb()
					{
						console.log("inner");
					}
					
				}
		</script>
		<style type="text/css">
			#div1{
				width: 400px;
				height: 400px;
				background-color: #800080;
			}
			#div2
			{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				
			</div>
		</div>
	</body>
</html>

风华正茂呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习日记--事件

1.事件基础 JavaScript事件是由访问Web页面的用户引起的一系列操作，当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等2.事件处理函数 javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。所有的事件处理函数都会有两个部分组成，on+事件名称注：事件对象当触发某个事件时，会产生一个事件对象，这个对象...
复制链接

扫一扫