12 js事件

Posted 2021-03-15 Scorpicat

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了12 js事件相关的知识，希望对你有一定的参考价值。

事件

js中添加事件的第一种方式：
在html上直接使用事件属性来添加，属性值为监听执行的函数
js中的事件只有在当前HTML上有效
一个HTML可以添加多个不同的事件
一个监听事件可以触发多个函数，不同的函数之间用分号隔开

点击事件

单机 onclick
双击 ondblclick

鼠标事件

onmouseover 当鼠标悬停在某个HTML标签上的时候触发
onmousemove 当鼠标在某个HTML上移动时触发
onmouseout 当鼠标溢出某个HTML时触发

键盘事件

onkeyup 当键盘在某个HTML元素上弹起时触发
onkeydown 当键盘在某个HTML元素上下压时触发

焦点事件

输入框一闪一闪那个竖线就是焦点

onfoucus 当某个HTML元素获取焦点时触发，持续触发
onblur 当某个HTML元素失去焦点时触发

值改变事件

　onchange 当值被改变时触发

页面加载事件

onload 当页面加载成功时触发。用在body标签里

代码

<!DOCTYPE html>
<html>
	<head >
		<meta charset="utf-8">
		<title ></title>
	</head>
	<body  onload="onloadTest()">
		<!-- 
			点击事件
				单机 onclick 
				双击 ondblclick
			鼠标事件
				onmouseover 当鼠标悬停在某个HTML标签上的时候触发
				onmousemove 当鼠标在某个HTML上移动时触发
				onmouseout 当鼠标溢出某个HTML时触发
			键盘事件
				onkeyup 当键盘在某个HTML元素上弹起时触发
				onkeydown 当键盘在某个HTML元素上下压时触发
			焦点事件
				输入框一闪一闪那个竖线就是焦点
				onfoucus 当某个HTML元素获取焦点时触发
				onblur 当某个HTML元素失去焦点时触发
			页面加载事件
				onload 当页面加载成功时触发
			注意：
				js中添加事件的第一种方式：
					在HTML上直接使用事件属性来添加，属性值为监听执行的函数
				js中的事件只有在当前HTML上有效
				一个HTML可以添加多个不同的事件
				一个监听事件可以触发多个函数，不同的函数之间用分号隔开
		 -->
		 <script type="text/javascript">
		 	function onclickTest(){
				alert("我是单击事件");
			}
			function ondblclickTest(){
				alert("我是双击事件");
			}
			function onmouseoverTest(){
				alert("我是鼠标悬停事件");
			}
			function onmousemoveTest(){
				alert("我是鼠标移动事件");
			}
			function onmouseoutTest(){
				alert("我是鼠标移出事件");
			}
			function onkeyupTest(){
				alert("我是按键抬起事件");
			}
			function onkeydownTest(){
				alert("我是按键按下事件");
			}
			function onfocusTest(){
				alert("我是获得焦点事件");
			}
			function onblurTest(){
				alert("我是失去焦点事件");
			}
			
			function onloadTest(){
				alert("我是加载页面事件");
			}
			//onloadTest()页面加载事件也可以随着js代码的位置加载，通常放在页面底部的js代码中比较多
			function onchangeTest(){
				alert("我是值改变事件");
			}
		 </script>
		 <h1>js事件</h1>
		 <hr>
		<!-- 点击事件
		 	单机 onclick 
		 	双击 ondblclick -->
		 <h3>点击事件</h3>
		 <button type="button" onclick="onclickTest()">单击事件</button>
		 <button type="button" ondblclick="ondblclickTest()">双击事件</button>
		 鼠标事件<!-- 
		  	onmouseover 当鼠标悬停在某个HTML标签上的时候触发
		  	onmousemove 当鼠标在某个HTML上移动时触发
		  	onmouseout 当鼠标溢出某个HTML时触发 -->
		 <h3>鼠标事件</h3>
		 <div style="width:190px;height: 190px;border:solid 1px red;"
		 onmouseover="onmouseoverTest()" onmousemove="onmousemoveTest()"
		 onmouseout="onmouseoutTest()"></div>
		 <!-- 键盘事件
		 	onkeyup 当键盘在某个HTML元素上弹起时触发
		 	onkeydown 当键盘在某个HTML元素上下压时触发 -->
		<h3>键盘事件</h3>
		按键按下：<input onkeydown="onkeydownTest()"/>
		按键抬起：<input onkeyup="onkeyupTest()"/>
		<!-- 焦点事件
			输入框一闪一闪那个竖线就是焦点
			onfoucus 当某个HTML元素获取焦点时 持续触发
			onblur 当某个HTML元素失去焦点时触发 -->
		<h3>焦点事件</h3>
		获得焦点：<input onfocusin="onfocusTest()" />
		失去焦点：<input onblur="onblurTest()" /><br/>
		<!-- 值改变事件
			onchange:当标签的value值改变时触发 -->
		值改变事件：<select name="school" onchange="onchangeTest()">
			<option value ="null">--请选择--</option>
			<option value ="白云一中">白云一中</option>
			<option value ="白云二中">白云二中</option>
			<option value ="白云三中">白云三中</option>
		</select>
		<!-- 页面加载事件
			onload 当页面加载成功时触发 -->
		<h3>页面加载事件</h3>
		见body标签
	</body >
</html>

以上是关于12 js事件的主要内容，如果未能解决你的问题，请参考以下文章