JavaScript事件类型、事件、事件句柄

1. 表单事件

 

事件事件句柄事件解释
ChangeonChange当元素改变时执行JS代码
SubmitonSubmit当表单被提交时执行JS代码
ResetonReset当表单被重置时执行JS代码
SelectonSelect当元素被选取时执行JS代码
BluronBlur当元素失去焦点时执行JS代码
FocusonFocus当元素获得焦点时执行JS代码

 

  • 获得焦点与失去焦点事件

 

当表单获得焦点时会触发focus获得焦点事件;当表单控件失去焦点时会触发blur事件。

应用:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>获得/失去焦点测试</title>
	<script type="text/javascript">
		function getFocus(){ document.bgColor="#000000"; }
		function loseFocus(){ document.bgColor="#FFFFFF"; }
	</script>
	
</head>
<body>
	<form>
		<br/><input type="button" onfocus="getFocus()" value="获得/失去焦点触发事件" onblur="loseFocus()" />
	</form>
</body>
</html>οnfοcus="getFocus()" value="获得/失去焦点触发事件" οnblur="loseFocus()" />
	</form>
</body>
</html>

 

 

  • 提交及重置事件

应用:

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表单提交、重置事件的应用</title>
	<script language="javascript" type="text/javascript">
		function $ (id) {
			return document.getElementById(id);
		}
		function submitTest() {
			var msg = "用户名是:" + $ ("input1").value;
			msg += "\n密码是:" + $ ("input2").value;
			alert(msg);
			return false;
		}
		function resetTest() { alert("将数据清空");}
	</script>
	
</head>
<body>
	<form onsubmit="return submitTest();" onreset="resetTest()">
		<fieldset>
			<legend>表单数据提交</legend>
			<br><label>用户名:</label><input type="text" id="input1">
 			<br><label>密   码:</label><input type="password" id="input2">
			<br><input type="submit" value="提交">
			<input type="reset" value="重置">
		</fieldset>
	</form>
</body>
</html>οnsubmit="return submitTest();" οnreset="resetTest()">
		<fieldset>
			<legend>表单数据提交</legend>
			<br><label>用户名:</label><input type="text" id="input1">
 			<br><label>密   码:</label><input type="password" id="input2">
			<br><input type="submit" value="提交">
			<input type="reset" value="重置">
		</fieldset>
	</form>
</body>
</html>

 

  • 改变及选择事件
<form>
		<input type="text" name="" value="文本被选择后触发事件" onselect="Javascript:alert('内容已被选中!')">
	</form>οnselect="Javascript:alert('内容已被选中!')">
	</form>

 

 

鼠标事件

事件事件句柄事件解释
ClickonClick当鼠标被单击时执行JS代码
DblclickonDblclick当鼠标被双击时执行JS代码
MouseDownonMouseDown当鼠标按钮被按下时执行JS代码
MouseMoveonMouseMove当鼠标指针移动时执行JS代码
MouseOveronMouseOver当鼠标指针悬浮于某元素之上时执行JS代码
MouseOutonMouseOut当鼠标移出某元素时执行JS代码
MouseUponMouseUp当鼠标按钮被松开时执行JS代码

 

<input type="button" name="click" value="鼠标单击" onclick="alert('你单击了我!')"> 
<input type="button" name="click" value="鼠标双击" onclick="alert('你双击了我!')"> 

 

 

3. 键盘事件

事件事件句柄事件解释
KeyDownonKeyDown当键盘被按下时执行JS代码
KeyPressonKeyPress当键盘被按下后又松开时执行JS代码
KeyUponKeyUp当键盘被松开时执行JS代码

 

 

 

4. 窗口事件

事件事件句柄事件解释
LoadonLoad当文档载入时执行JS代码
UnLoadonUnload当文档卸载时执行JS代码


 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页