js事件-优快云博客

本文详细介绍了网页中常见的几种事件处理方式，包括鼠标事件、键盘事件、表单事件及页面事件等。通过具体示例展示了如何使用JavaScript来实现这些事件的响应和处理。

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

键盘事件，鼠标事件，表单事件，绑定多个事件

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>event</title>
</head>
<body>
	<h2>鼠标事件</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<div style="width: 200px;height: 100px;background-color: green;" id="div01" onmousedown="mDown(this)" onmouseup="mUp(this)" onmouseout="mOut(this)" onmouseover="mOver(this)">
			<font color="white">hello world</font>
		</div>
		<script type="text/javascript">
			function mDown(obj){
				obj.innerHTML="HELLO WORLD";
				obj.style="width:200px;height: 100px;background-color: green;color:red;";
			}
			function mUp(obj){
				obj.innerHTML="hello world";
				obj.style="width: 200px;height: 100px;background-color: green;color:white;";
			}
			function mOut(obj){
				obj.innerHTML="mOut";
				obj.style="width: 200px;height: 100px;background-color: green;color:white;";
			}
			function mOver(obj){
				obj.innerHTML="mOver";
				obj.style="width: 200px;height: 100px;background-color: green;color:red;";
			}
			function mMove(obj){
				alert("mMove");
				obj.style="width: 200px;height: 100px;background-color: green;color:red;";
			}
		</script>
	</div>
	<h2>键盘事件</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<input type="text" name="n01" onkeyup="kUp(this)" />
		<script type="text/javascript">
			function kDown(obj){
				alert("键盘按下了");
			}
			function kPress(obj){
				alert("键盘按住");
			}
			function kUp(obj){
				obj.value=obj.value.toUpperCase();
			}
		</script>
	</div>
	<h2>表单事件</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<form action="" method="post" onsubmit="return oSubmit(this)">
			<input type="text" value="test" onfocus="oFocus(this)" onblur="oBlur(this)" onchange="oChange(this)" />
			<input type="submit" value="submit" />
		</form>
		<script type="text/javascript">
			// window.onload=function(){
			// 	alert("onload is work");
			// }
			// window.onunload = function(){
			// 	alert("unload is work");
			// }
			// window.onbeforeunload = function(){
			// 	alert("onbeforeunload is work");
			// }
			function oSubmit(obj){
				alert("表单提交了");
			}
			function oFocus(obj){
				obj.style="border-color:#ff0000 #0000ff;";
			}
			function oBlur(obj){
				obj.style="";
			}
			function oChange(obj){
				alert("change");
			}
		</script>
	</div>
	<h2>页面事件</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> 
			<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> 
		</div> 
		<div id="info"></div> 
		<script type="text/javascript"><!-- 
			var name1=document.getElementById('name1'); //要注意 
			var name2=document.getElementById('name2'); //要注意 
			var info=document.getElementById('info'); 
			// 对象.attachEvent("事件(on)","处理程序")  添加
			// 对象.dettachEvent("事件(on)","处理程序")  删除

			// FF:
			// 对象.addEventListener("事件","处理程序",布尔值)   添加
			// 对象.removeEventListener("事件","处理程序",布尔值)  删除

			// IE:
			// 事件对象.cancelBubble=true;   
			// FF:
			// 事件对象.stopPropagation(); 
			
			// IE11以下为attachEvent
			if(name1.attachEvent){ //对于attachEvent前面的target我们一定要保证不为空 
				name1.attachEvent('onclick',function () { info.innerHTML += "红色" + "<br>"; }); 
				name2.attachEvent('onclick',function () { info.innerHTML += "绿色" + "<br>"; }); 
			}else{ 
				name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); 
				name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); 
			} 
		</script> 
	</div>
</body>
</html>