JavaScript中的事件，传统事件类型（鼠标事件，键盘事件，表单事件）

最新推荐文章于 2022-09-29 22:00:00 发布

王大瑜

最新推荐文章于 2022-09-29 22:00:00 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/WangY321/article/details/89371000

版权

事件

事件的定义指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
事件类型：事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论的特定类型的事件。
事件目标：事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须同时指定类型和目标。像 window 上的 load 事件或者链接的 click 事件。在客户端 js 的应用程序中，Window、Document、和 Element 对象是最常见的事件目标，但是某些事件也是由其它类型的对象触发的。 事件处理程序或事件监听程序：我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即： click、mousemove、load 等都是事件的名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
事件对象：事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件对象定义一组属性。
事件传播：事件传播是浏览器决定那个对象触发其事件处理程序的过程。

传统事件类型

鼠标事件

onclick 当用户点击某个对象时调用的事件

head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.function(){
				var divElement=document.getElementsByClassName('div1')[0];
				divElement.function(){
					divElement.style.background='green';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>

oncontextmenu 用户点击鼠标右键打开上下文菜单时触发
ondbliclick 用户双击某个对象时调用的事件
onmousedown 鼠标按钮被按下
onmouseenter 当指针移动到元素上时触发
onmouseleave 鼠标指针移除元素时触发
onmousemove 鼠标被移动
onmouseover 鼠标移动到某元素上
onmouseout 鼠标从某元素上离开
onmouseseup 鼠标按键被松开

键盘事件

onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开

事件对象 Event

(1)什么是事件对象?
在触发DOM上的事件时,会产生一个事件的对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息.
(2)event对象的兼容性写法
event事件对象不能兼容所有的浏览器,我们一般采用下面这种方式进行兼容
var oEvent=ev || event; 如果参数不是 ev 而是 event 的时候，兼容方式也可以写成下面这种格式。 document.function(event){ var oEvent=event || window.event; console.log(oEvent); }
(3)event常用属性有哪些?
oEvent.type:获取绑定事件的类型
oEvent.target:(在IE中用event.srcElement)返回触发事件的元素.
oEvent.currentTarget:(IE低版本中不存在)表示当前所绑定事件的元素

表单事件

onblur：元素失去焦点时触发

<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.function(){
				var txt_01=document.getElementById('txt');
				var pwd_01=document.getElementById('pwd');
				var spa_01=document.getElementById('spa');
				var spa_02=document.getElementById('spa1');
				txt_01.function(){
					
		            if(txt_01.value=='admin'){
		            	alert('输入正确')
		            }else{
		            	
		            	spa_01.innerHTML='请输入正确的账户名';
		            	
		            }
				}
				pwd_01.function(){
					
		            if(pwd_01.value=='123456'){
		            	alert('输入正确')
		            }else{
		            	spa_02.innerHTML='请输入正确的账户或密码';
		            	
		            }
		            
		            
				}
				
					
				}
			
		</script>
	</head>
	<body>
		<form action="" method="post" id="form">
			账户：
			<input type="text" id="txt" /><span id="spa"></span><br />
			
			密码：
			<input type="password" id="pwd" /><span id="spa1"></span><br />
			<input type="submit" value="登录"/>
		</form>
	</body>

onfocus：获取焦点时触发
onchange：该事件在表单的内容改变时触发
onselect：用户选取文本是触发
oninput：元素获取用户时触发
onsearch：用户向搜索域输入文本时触发
onsubmit：表单提交时触发

<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.function(){
				var form_01=document.getElementById('form');
				form_01.function(){
					if(txt.value=='admin'&&pwd.value=='123456'){
						 alert ('登录成功');
					}else{
						alert ('账户或密码不正确，请重新输入');
						
					}
				}
			}
		</script>
	</head>
	<body>
		<form action="" method="post" id="form">
			账户：
			<input type="text" id="txt" /><br />
			密码：
			<input type="password" id="pwd" /><br />
			<input type="submit" value="登录"/>
		</form>
		
		
	</body>

onfocusic：元素即将获取焦点时触发
onfocusout：元素即失去焦点时触发
onreset：表单重置时触发

王大瑜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的事件，传统事件类型（鼠标事件，键盘事件，表单事件）

事件事件的定义指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。事件类型：事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论的特定类型的事件。事件目标：事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须同时指定类型和...
复制链接

扫一扫