js的事件机制学习01

最新推荐文章于 2024-04-23 20:52:37 发布

you些话

最新推荐文章于 2024-04-23 20:52:37 发布

阅读量56

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44805105/article/details/110671848

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

js的事件机制：

解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
作用：主要是结合js的函数来使用。
内容:
1、单双击事件
单击：onclick 当鼠标单击的时候会触发
双击：ondblclick 当鼠标双击的时候会被触发
2、鼠标事件
onmouseover 当鼠标悬停在某个HTML元素上的时候触发
onmousemove 当鼠标在某个HTML元素上移动的时候触发
onmouseout 当鼠标在某个HTML元素上移出的时候触发
3、键盘事件
onkeyup 当键盘在某个HTML元素上弹起的时候触发
onkeydown 当键盘在某个HTML元素上下压的时候触发
4、焦点事件
onfocus 当某个HTML元素获取焦点的时候触发
onblur 当某个HTML元素失去焦点的时候触发
5、页面加载事件
onload 当页面加载成功后触发。
注意:
js中添加事件的第一种方式：
在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
js中的事件只有在当前HTML元素上有效。
一个HTML元素可以添加多个不同的事件。
一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js时间学习</title>
		
		<script type="text/javascript">
			//单击事件
			function testOnclick(){
				alert("我是单击");
			}
			//双击事件
			function testOndblclick(){
				alert("我是双击");
			}
			
			//鼠标事件
			function testOnmouseover(){
				alert("我是鼠标悬停事件");
			}
			function testOnmousemove(){
				alert("我被移动了")
			}
			function testOnmouseout(){
				alert("我被移出了");
			}
			//键盘事件
			function testOnkeyup(){
				
				alert("我是键盘弹起事件");
			}
			function testOnkeydown(){
				alert("我是键盘按下事件");
			}
			
			//焦点事件
			function testOnfocus(){
				document.getElementById("showid").innerHTML="哈哈";
				alert("我是获取焦点事件");
			}
			function testOnblur(){
				alert("我是失去焦点事件");
			}
			//页面加载
			function testOnload(){
				alert("我是页面加载事件");
			}
			
		</script>
		<style type="text/css">
			
			#showid{
				width: 300px;
				height: 300px;
				border: solid 1px;
			}
		</style>
	</head>
	<body onload="testOnload()">
	<input type="button" value="单击" onclick="testOnclick()" />
		<input type="button" value="双击" ondblclick="testOndblclick()" />
		<hr />
		<div id="showid" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
		
		</div>
		<hr />
		<br />
		<br />
		<hr />
		键盘事件学习：<br />
		键盘弹起事件:<input type="text" onkeyup="testOnkeyup()" /><br /><br />
		键盘下压事件:<input type="text" onkeydown="testOnkeydown()" />
		<hr />
			焦点事件学习：<br />
				获取焦点： <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />
				失去焦点： <input type="text" name="" id="" value=""  onblur="testOnblur();"/>
	</body>
</html>