javascript之事件处理

最新推荐文章于 2020-05-11 21:34:05 发布

车晋强

最新推荐文章于 2020-05-11 21:34:05 发布

阅读量512

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/chejinqiang/article/details/44116707

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了JavaScript中的事件处理机制，包括HTML中的事件绑定、非标准事件绑定方式、使用JavaScript绑定事件处理器等内容，并介绍了事件处理器的作用域、返回值以及如何使用现代事件模型处理更复杂的事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第二篇 JavaScript核心技术
第九章事件处理
HTML支持绝大多数元素进行事件绑定，这些绑定通常作为元素的属性来调用。
如：

<html>
<head></head>
<body>
<script language="javascript">

</script>
<h1>超级链接上的事件绑定</h1>
<a href="www.swu.edu.cn/index" onclick="alert('不不不');">www.baidu.com</a>
</body>
</html>
绝大多数的XHTML事件属性涵盖了用户操作：
onblur 某元素失去焦点后会出现，表明用户已经激活另一元素
onchange 某元素已经失去焦点，并且从用户最后一次访问以来，其值已经改变
onclick 鼠标单击
onablclick 双击
onfocus 获得焦点
onkeydown
onkeyup
onkeypress
onload 加载
onmousedown onmouseup onmousepress onmouseover onmouseup
onreset 表明表单被复位，通常用来激活一个复位按钮。
onselet 表明用户选择的文本，通常会高清显示
onsubmit onunload
如下是对事件绑定的运用代码：

<html>
<head></head>
<body onload="alert('事件驱动已经加载');" onunload="alert('leaving demo');">
<h1 align="center">HTM事件绑定</h1>
<form action="#" method="get" onreset="alert('重置');" onsubmit="alert('提交');return false;">
<ul>
<li>onblur:
<input type="text" value="在本域单击鼠标后离开" size="40" onblur="alert('失去焦点');"><br><br></li>
<li>onclick:<input type="button" value="点这里" onclick="alert('按钮点击');">
<br><br></li>
<li>onchange:<input type="text" value="改变这里的内容然后离开" size="40" onchange="alert('changed');">
<br><br></li>
<li>dblclick:<input type="button" value="双击这里" ondblclick="alert('按钮被双击');"><br><br></li>
<li>onfocus:<input type="text" value="点击本域" onfocus="alert('get focus');"><br><br></li>
<li>onsubmit:<input type="submit" value="提交"><br><br></li>
</ul>
</form>
</body>
</html>
2.非标准方式绑定事件，最常见的语法是在<script>中使用for属性，，通过id来引用一个元素，然后将事件指向处理器。如下所实例：

<html>
<head></head>
<body>
<h1>非标准事件绑定</h1>
<p id="myparagraph">移动鼠标到此查看效果</p>
<script language="javascript" for="myparagraph" event="onmouseover">

</script>
</body>
</html>
9.2.2使用JavaScript绑定事件处理器
使用JavaScript同样可以绑定事件处理器，尤其是希望动态添加或移除处理器时，显得更为方便，要使用JavaScript 完成些任务。要清楚事件处理器作为对象的方法会被访问。如：

<html>
<head></head>
<body>
<h1>使用JavaScipt绑定事件处理器</h1>
<form action="#" method="get" name="myform" id="myform">
<input name="mybutton" id="mybutton" type="button" value="click here">
</form>
<script>

</script>
</body>
</html>
在上面的例子中，直接使用了函数的形式，如果事件处理器比较复杂，不是一种好的选择，可以编写一个函数，然后在事件处理器中来调用这个函数。如：

<html>
<head></head>
<body>
<h1>简单的JavaScript事件绑定</h1>
<form name="myform" id="myform" action="#" method="get">
<input type="button" id="mybutton" name="mybutton" value="click here">
</form>
<script language="javascript">

</script>
</body>
</html>
9.2.3事件处理器的作用域
事件处理器中脚本的作用域是其所在的对象，this指向的是其所在的元素。
9.2.4事件处理器的返回值
事件处理器的返回值可以影响事件的默认动作，取消事件的默认动作，可以通过使事件处理器返回false来实现。当一个表单的submit返回false时，表单提交就会被取消。
关于事件处理器最多的应用就是用于表单的提交，在表单数据发送到服务器之前，，，对数据的有效性进行校验。如下：

<html>
<head></head>
<body>
<h1>事件处理器的返回值</h1>
<script language="javascript">

</script>
<form onsubmit="return validateField(this.username);" >
<input type="text" name="username" id="username">
<input type="submit" value="login">
</form>
</body>
</html>
9.2.5自动触发事件与手动触发事件。自动调用 document.myform.button.click();
IE4+事件模型
基本事件模型，又称传统事件模型，在处理表单提交等简单任务时非常出色。但在处理更为复杂的事件时则显得力不从心。而在4及以且的浏览器支持的现代事件模型中，对事件的处理则强大的多。二者的主要区别在于现代事件模型增加了Event对象。
9.3.1 绑定处理器至对象
不管用哪一种浏览器，都可以使用页面元素或者JavaScript，将事件处理器绑定至对象。在IE中，功能进行了扩充，增加了attachEvent()方法，用来支持DHTML行为。其语法如下：
object.attachEvent("event to handle",eventhandler);
第一个参数是一个类似onclick的字符串，第二个参数enentHandler,是当事件发生时要调用的函数，返回值是一个逻辑值。要移除一个处理器可以使用detachEvent().
如：

<html>
<head></head>
<body onload="enableEvent();">
<script language="javascript">
function showAuthor(){
alert("che");
}
function enableEvent(){
someText.attachEvent("onmouseover",showAuthor);
}
function disableevent(){
someText.detachEvent("onmouseover",showAuthor);
}

</script>
<em id="someText">we may be in the gutternbut some of us are looking at stars</em>
<form>
<input type="button" value="attachevent" onclick="enableEvent();">
<input type="button" value="detachevent" onclick="disableEvent();">
</form>
</body>
</html>
9.3.2Event对象
在IE4+中，当事件发生时，会临时创建一个Event对象，并使其可用于适当的处理器。
Event对象的一些属性：
srcElement 产生该事件的元素
type 以字符串形式返回事件类型
clientX 相对用户区域的X坐标
clientY 相对用户区域的Y坐标
screenX 相对实际屏幕的X坐标
screenY 相对实际屏幕的Y坐标
button 确定是哪个鼠标键被按下
keyCode 按键的代码
altKey
ctrlKey
shiftKey
cancelBubble 表明该事件是不是应沿事件层次向上移
returnValue 事件返回值
fromElement 被移动的元素
toElement 正在移动到的元素
9.3.3 事件流
在IE中，事件的行为是按照标签结构层次流动执行的。
DOM2事件模型

<!--超链接上的事件绑定-->
<html>
	<head></head>
	<body>
		<script language="javascript">
			<!--
			//-->
			</script>
			<h1>超级链接上的事件绑定</h1>
			<a href="www.swu.edu.cn/index" onclick="alert('不不不');">www.baidu.com</a>
	</body>
</html>

<!--事件绑定-->
<html>
	<head></head>
	<body onload="alert('事件驱动已经加载');" onunload="alert('leaving demo');">
		<h1 align="center">HTM事件绑定</h1>
		<form action="#" method="get" onreset="alert('重置');" onsubmit="alert('提交');return false;">
			<ul>
				<li>onblur:
				<input type="text" value="在本域单击鼠标后离开" size="40" onblur="alert('失去焦点');"><br><br></li>
				<li>onclick:<input type="button" value="点这里" onclick="alert('按钮点击');">
				<br><br></li>
				<li>onchange:<input type="text" value="改变这里的内容然后离开" size="40" onchange="alert('changed');">
				<br><br></li>
				<li>dblclick:<input type="button" value="双击这里" ondblclick="alert('按钮被双击');"><br><br></li>
				<li>onfocus:<input type="text" value="点击本域" onfocus="alert('get focus');"><br><br></li>
				<li>onsubmit:<input type="submit" value="提交"><br><br></li>
			
		
	</body>
</html>

<!--9.3.html-->
<html>
	<head></head>
	<body>
		<h1>非标准事件绑定</h1>
		<p id="myparagraph">移动鼠标到此查看效果</p>
		<script language="javascript" for="myparagraph" event="onmouseover">
			<!--
			alert("ok");
			
			//-->
			</script>
	</body>
</html>

<!--JavaScript事件绑定-->
<html>
	<head></head>
	<body>
		<h1>使用JavaScipt绑定事件处理器</h1>
		<form action="#" method="get" name="myform" id="myform">
			<input name="mybutton" id="mybutton" type="button" value="click here">
		</form>
		<script>
			<!--
			document.myform.mybutton.onclick=new Function("alert('ok');");
			//-->
			</script>
		</body>
</html>

<!--简单的JavaScript事件绑定-->
<html>
	<head></head>
<body>
	<h1>简单的JavaScript事件绑定</h1>
	<form name="myform" id="myform" action="#" method="get">
	<input type="button" id="mybutton" name="mybutton" value="click here">
	</form>
	<script language="javascript">
		<!--
		function showmessage(){
			alert("it is ok");
		}
		document.getElementById("mybutton").onmouseover=showmessage;
		
		//-->
		</script>
</body>	
</html>

<!--9.11.html-->
<html>
	<head></head>
	<body onload="enableEvent();">
		<script language="javascript">
		function showAuthor(){
			alert("che");
		}
		function enableEvent(){
			someText.attachEvent("onmouseover",showAuthor);
		}
		function disableevent(){
			someText.detachEvent("onmouseover",showAuthor);
		}
		
	</script>
	<em id="someText">we may be in the gutternbut some of us are looking at stars</em>
	<form>
		<input type="button" value="attachevent" onclick="enableEvent();">
		<input type="button" value="detachevent" onclick="disableEvent();">
</form>
		</body>
</html>

<script type="text/javascript">
	//事件
	//IE,冒泡型事件，DOM事件流，一次捕获过程一次冒泡过程。
	//冒泡事件是从下往上，捕获事件从上往下.
	//DOM还支持文本节点的捕获
	//事件处理函数/监听函数
	var oDiv=document.getElementById("div1");
	oDiv.onclick=function(){
		alert("i was clicked");
		};
	<div onclick="alert('i am clicked')"></div>
	//为每个可用事件分配多个事件处理函数
	//IE中，attachEnvent(),detachEvent()
	var fnclick1=function(){alert("clicked")};
	vr fnclick2=function(){alert("also clicked")};
	var oDiv=document.getElementById("div");
	oDiv.attachEvent("onclick",fnClick1);
	oDiv.attachEvent("onclick",fnClick2);
	//DOM中，addEventListener(),removeEventListener()这些方法需要三个参数,
	//事件名称，要分配的函数，true表示用于捕获阶段，false表示用于冒泡阶段
	oDiv.addEventListener("onclick",fnclick1,false);
	oDiv.addEventListener("onclick",fnclick2,false);
	//事件对象,是window对象的一个属性event
	oDiv.onclick=function(){
		var oEvent=window.event;
		}
	oDiv.onclick=function(oEvent){}
	//属性和方法，在IE和DOM当中
	//相似性
	//获取事件类型
	var sType=oEvent.type; //返回类似"click"或"mouseover"之类的值。
	function handleEvent(oEvent){
		if(oEvent.type=="click")
		{
			alert("clicked!");
			}
			else if(oEvent.type=="mouseover"){
				alert("mouse over");
				}
		}
 oDiv.onclick=handleEvent;
 oDiv.onmouseover=handleEvent;
 //在keydown,keyup事件中，可以使用keyCode属性获取按下的按键的数值代码。
 var iKeyCode=oEvent.keyCode();
 //例如Enter键为13，空格键为32，回退键为8.
 //检测shift,alt,ctrl键是否被按下，
 var bshift=oEvent.shiftKey;
 var bAlt=oEvent.altKey;
 var bCtrl=oEvent.ctrlKey;
 //获取客户端坐标,客户端区域是显示网页的窗口部分
 var iClientX=oEvent.clientX;
 var iClientY=oEvent.clientY;
 //获取屏幕位置
 var iScreenX=oEvent.screenX;
 var iScreenY=oEvent.screenY;
 //////////////////////////////////////////
 //区别
 //获取目标
 //位于事件中心的对象称为目标
 var oTarget=oEvent.srcElement;//IE
 var oTarget=oEvent.target;//DOM
 //获取字符代码
 var iCharCode=oEvent.keyCode;//IE
 var iCharCode=oEvent.charCode;//DOM
 //然后可以用这个值来获取实际的值
 var sChar=string.fromCharCode(oEvent.charCode);
 //如果不确定按下的键当中是否包含字符，可以使用isChar属性进行判断
 if(oEvent.isChar){
 	var iCharcode=oEvent.charCode;
 	}
 	//3.阻止某个事件的默认行为
 	//在用户右键点击页面时，阻止他使用上下文菜单.
 	document.body.oncontextmenu=function(oEvent){
 		if(isIE){
 			oEvent=window.event;
 			oEvent.returnValue=false;
 			}
 			else{
 				oEvent.preventDefault();
 				}
 		}
 		//停止事件复制
 		oEvent.cancelBubble=true;//IE
 		oEvent.stopPropagation();//mozilla
 		
 /////////////////////////////////////////////////
 //事件的类型
 //鼠标事件，键盘事件，HTML事件，突变事件。
 //鼠标事件:click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove
 <html>
<head>
	<script type="text/javascript">
		//打印出鼠标事件的各个类型
		function handleEvent(oEvent){
			var oTextbox=document.getElementById("txt1");
			oTextbox.value+="\n"+oEvent.type;
			}
		</script>
</head>
<body>
	<p>your mouse to click and double click the red square.</p>
	<div style="width:100px;height:100px;background-color:red" onmouseover="handleEvent(event)"
		onmouseout="handleEvent(event) onmousedown="handleEvent(event)" onmouseup="handleEvent(event)"
	onclick="handleEvent(event)" ondbclick="handleEvent(event)" id="div1"></div>
	<p><textarea id="txt1" rows="15" cols="50"></textarea></p>	
</body>
</html>
//一个很流行的改变图片的.
<img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">
//事件的属性：坐标属性(clientX,clientY)，type属性，target或srcElement属性，shiftKey,ctrlKey,altKey,button属性
	function handleEvent(oEvent){
			var oTextbox=document.getElementById("txt1");
			oTextbox.value+="\n"+oEvent.type;
			oTextbox.value+="\n target is"+(oEvent.target||oEvent.srcElement).id;
			oTextbox.value+="\n at("+oEvent.clientX+","+oEvent.clientY+") on the client";
			oTextbox.value+="\n at("+oEvent.screenX+","+oEvent.screenY+") on the screen";
			oTextbox.value+="\n button down is"+oEvent.button;
			var arrKeys=[];
			if(oEvent.shiftKey)
			arrKeys.push("shift");
			if(oEvent.ctrlKey)
			arrKeys.push("ctrl");
			if(oEvent.altKey)
			arrKeys.push("alt");
			oTextbox.value+="\n keys down are"+arrKeys;
			}
//要触发dbclick事件，在同一个目标上要顺序发生以下事件：
//mousedown,mouseup,click,mousedown,mouseup.click,dbclick.
//////////////////////////
//键盘事件:keydown,keypress,keyup
//事件属性:keyCode属性,charCode属性(DOM),target或srcElement,shiftKey,ctrlKey,altKey,
<html>
<head>
	<script type="text/javascript">
		//打印出键盘标鼠事件的各个类型
		function handleEvent(oEvent){
			var oTextbox=document.getElementById("txt1");
			oTextbox.value+="\n"+oEvent.type;
			oTextbox.value+="\n target is"+(oEvent.target||oEvent.srcElement).id;
			oTextbox.value+="\n keycode is "+oEvent.keyCode;
			oTextbox.value+="\n charcode is "+oEvent.charCode;
			
			var arrKeys=[];
			if(oEvent.shiftKey)
			arrKeys.push("shift");
			if(oEvent.ctrlKey)
			arrKeys.push("ctrl");
			if(oEvent.altKey)
			arrKeys.push("alt");
			oTextbox.value+="\n keys down are"+arrKeys;
			}
		</script>
</head>
<body>
	<p>your mouse to click and double click the red square.</p>
	<p><textarea id="txtInput" rows="15" cols="50" onkeydown="handleEvent(event)" onkeyup="handleEvent(event)"
onkeypress="handleEvent(event)"></textarea></p>
	<p><textarea id="txt1" rows="15" cols="50" ></textarea></p>	
</body>
</html>
//用户按一次字符按键时，会按以下顺序发生：keydown,keypress,keyup
//HTML事件
//load事件，页面完全载入后，在window对象上触发。img完全载入后在其上触发.
//unload事件，页面完全卸载后，在window对象上触发.
//error事件,javascript脚本出错时，在window对象上触发。img指定图像无法载入时，在其上触发.
//resize事件，scroll事件，focus事件，blur事件。
window.onload=function(){
	alert(loaded);
	}		
//与load和unload事件类似，resize事件的处理函数必须使用javascript代码分配给window对象或者HTML中分配给body元素.
<body onresize="alert('resizing')">
//scroll事件,希望用户在卷动窗口时，确保某些内容一直在屏幕上可见.
//可与body元素的属性协用,scrollLeft,保存窗口在水平方向上卷动的距离，以及scrollTop，保存窗口在垂直方向上卷动的距离
window.onscroll=function(){
	var oWatermark=document.getElementById("divWatermark");
	oWatermark.style.top=document.body.scrollTop;
	}	

	</script>