欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javascript学习笔记--一些常见的事件

程序员文章站 2022-04-19 23:53:27
...
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascriptEvent</title>
</head>
<!-- onload	一张页面完成加载。 -->
<!-- onpageshow	该事件在用户访问页面时触发 -->
<!-- onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发 -->
<!-- onunload	用户退出页面。  -->
<body οnlοad="onloadEvent()">
<!-- 鼠标事件 -->
<div style="display: block;margin:100px;">
	<!-- onclick	当用户点击某个对象时调用的事件句柄。 -->
	<div οnclick="onclickEvent()">普通点击事件</div>
	<!-- oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发	  -->
	<div οncοntextmenu="oncontextmenuEvent()" >右键打开菜单事件</div>
	<!-- ondblclick	当用户双击某个对象时调用的事件句柄。	 -->
	<div οndblclick="ondblclickEvent()">双击对象事件</div>
	<!-- onmousedown	鼠标按钮被按下。	 -->
	<div οnmοusedοwn="onmousedownEvent()">鼠标按下事件</div>
	<!-- onmouseenter	当鼠标指针移动到元素上时触发。	 -->
	<div οnmοuseenter="onmouseenterEvent()">鼠标移动到元素上事件</div>
	<!-- onmouseleave	当鼠标指针移出元素时触发	 -->
	<div οnmοuseleave="onmouseleaveEvent()">指针移动到元素事件</div>
	<!-- onmousemove	鼠标被移动。	 -->
	<div οnmοusemοve="onmousemoveEvent()">鼠标被移动事件</div>
	<!-- onmouseover	鼠标移到某元素之上。	 -->
	<div οnmοuseοver="onmouseroverEvent()">鼠标移动到某元素事件</div>
	<!-- onmouseout	鼠标从某元素移开。	 -->
	<div οnmοuseοut="onmouseoutEvent()">鼠标从某元素移开事件</div>
	<!-- onmouseup	鼠标按键被松开。 -->
	<div οnmοuseup="onmouseupEvent()">鼠标按键被松开事件</div>
</div>

<!-- 键盘事件 -->
<!-- onkeydown	某个键盘按键被按下。	 -->
<input type="text" name="text1" οnkeydοwn="onkeydownEvent()">键盘按下事件
<!-- onkeypress	某个键盘按键被按下并松开。	 -->
<input type="text" name="text1" οnkeypress="onkeypressEvent()">键盘按下松开事件
<!-- onkeyup	某个键盘按键被松开。 -->
<input type="text" name="text1" οnkeyup="onkeyupEvent()">键盘松开事件

<!-- 表单事件 -->

<!-- onblur	元素失去焦点时触发	 -->
<input type="text" name="onblur" οnblur="onblurEvent()">
<!-- onchange	该事件在表单元素的内容改变时触发(input, ******,select,textarea	 -->
<input type="text" name="onchange" οnchange="onchangeEvent()">
<!-- onfocus	元素获取焦点时触发	 -->
<input type="text" name="onfocus" οnfοcus="onfocusEvent()">
<!-- onfocusin	元素即将获取焦点时触发	 -->
<input type="text" name="onfocusin" οnfοcusin="onfocusinEvent()">
<!-- onfocusout	元素即将失去焦点时触发	 -->
<input type="text" name="onfocusout" οnfοcusοut="onfocusoutEvent()">
<!-- oninput	元素获取用户输入时触发	 -->
<input type="text" name="oninput" οninput="oninputEvent()">
<!-- onreset	表单重置时触发	 -->
<form action="demo.php" οnreset="onresetEvent()">
	<input type="reset" name="reset" value="重置">
</form>
<!-- onsearch	用户向搜索域输入文本时触发 -->
<input type="search" name="onsearch" οnsearch="onsearchEvent()">
<!-- onselect	用户选取文本时触发 -->
<input type="search" name="onselect" οnselect="onselectEvent()">
<!-- onsubmit	表单提交时触发 -->
<form action="demo.php" οnsubmit="onsubmitEvent()">
<input type="submit" name="submit">
</form>
<script type="text/javascript">
	function onclickEvent(){alert('普通点击事件');}
	function oncontextmenuEvent(){alert('右键打开菜单事件');}
	function ondblclickEvent(){alert('双击对象事件');}
	function onmousedownEvent(){alert('鼠标按下事件');}
	function onmouseenterEvent(){alert('鼠标移动到元素上事件');}
	function onmouseleaveEvent(){alert('指针移动到元素事件');}
	function onmousemoveEvent(){alert('鼠标被移动事件');}
	function onmouseroverEvent(){alert('鼠标移动到某元素事件');}
	function onmouseoutEvent(){alert('鼠标从某元素移开事件');}
	function onmouseupEvent(){alert('鼠标按键被松开事件');}
	function onkeydownEvent(){alert('键盘按下事件');}
	function onkeypressEvent(){alert('键盘按下松开事件');}
	function onkeyupEvent(){alert('键盘松开事件');}
	function onloadEvent(){alert('页面加载完成事件');}
	function onblurEvent(){alert('元素失去焦点时触发');}
	function onchangeEvent(){alert('该事件在表单元素的内容改变时触发');}
	function onfocusEvent(){alert('元素获取焦点时触发');}
	function onfocusinEvent(){alert('元素即将获取焦点时触发');}
	function onfocusoutEvent(){alert('元素即将失去焦点时触发');}
	function oninputEvent(){alert('元素获取用户输入时触发');}
	function onresetEvent(){alert('表单重置时触发');}
	function onsearchEvent(){alert('用户向搜索域输入文本时触发');}
	function onselectEvent(){alert('用户选取文本时触发');}
	function onsubmitEvent(){alert('表单提交时触发');}
</script>	
</body>
</html>