JavaScript第七章事件

最新推荐文章于 2022-06-07 17:45:31 发布

Jayco江柯

最新推荐文章于 2022-06-07 17:45:31 发布

阅读量169

点赞数

分类专栏： JavaScript学习路线文章标签： javascript js

本文链接：https://blog.csdn.net/LvJzzZ/article/details/108252359

版权

JavaScript学习路线专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript自我学习路线

JavaScript事件

JavaScript事件

一、JavaScript中常用事件

blur失去焦点
focus获得焦点
keydown键盘按下
keyup键盘弹起
click鼠标单击
dblclick鼠标双击
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）
select文本被选定
change下拉列表选中项改变，或文本框内容改变

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on，事件句柄以属性的形式存在，出现在一个标签的属性位置上

二、事件注册的两种方式

1. 直接在标签中使用事件句柄

<input type="button" value="hello" onclick="lzj()"/>
<script type="text/javascript">
	function lzj(){
		alert("hello lzj");
	}
</script>
// 将lzj函数注册到按钮上，等待click事件发生后，该函数被浏览器调用，对于当前函数来说，称lzj函数为回调函数（callback函数）

回调函数的特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数

2. 使用纯JS代码完成事件的注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用纯JS代码完成事件的注册</title>
		<input type="button" value="hello" id="mybtn" />
		<script type="text/javascript">
			function lzj() {
				alert("Hello LZJ");
			}
			/* 第一步： 先获取这个按钮对象（ document全部小写， 内置对象， 可以直接使用， document代表整个HTML页面） */
			var obj = document.getElementById("mybtn");
			/* 第二步： 给按钮对象的onclick属性赋值 */
			// 将回调函数lzj注册到click事件上
			obj.onclick = lzj; // 不能加()，直接用函数名
		</script>
	</head>
	<body>
	</body>
</html>

使用匿名函数完成此方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<input type="button" value="hello" id="mybtn" />
		<!-- <script type="text/javascript">
			function lzj() {
				alert("Hello LZJ");
			}
			/* 第一步： 先获取这个按钮对象（ document全部小写， 内置对象， 可以直接使用， document代表整个HTML页面） */
			var obj = document.getElementById("mybtn");
			/* 第二步： 给按钮对象的onclick属性赋值 */
			// 将回调函数lzj注册到click事件上
			obj.onclick = lzj; // 不能加()，直接用函数名
		</script> -->
		<script type="text/javascript">
			var obj = document.getElementById("mybtn");
			// 使用匿名函数，这个匿名函数也是回调函数
			obj.onclick = function() {
				alert("Hello LZJ");
			}
			// 简写
			/* document.getElementById("mybtn").onclick = function(){
				alert("Hello LZJ");
			} */
		</script>
	</head>
	<body>
	</body>
</html>

三、JS代码的执行顺序

不写onload，input标签放在后则不能执行，因为页面还没有加载到id
<script type="text/javascript">
	// 页面打开，function就注册成功
	// 页面加载的过程中，将第一个function函数注册给load事件
	window.onload = function(){
	// 页面加载完毕，将第二个function函数注册成功
	// 页面加载完毕，load事件发生，此时执行回调函数（第一个function）
	// 回调函数（第一个function）执行过程中，把第二个function函数注册给了id="mybtn"的click事件
	// 当id="mybtn"发生click事件之后，第二个function函数被调用执行
		document.getElementById("mybtn").onclick = function(){
			alert("hello lzj");
		}
	}
</script>
<input type="button" value="hello" id="mybtn"/>

四、JS代码捕捉键值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var m = document.getElementById("lzj");
				m.onkeydown = function(event) { // 获取键值(回车键13，ESC键27)
					// 对于“键盘事件对象”来说，都有keyCode属性用来获取键值
					alert(event.keyCode);
				}
			}
			// 回车验证
			m.onkeydown = function() {
				if (event.keyCode === 13) {
					alert("正在验证......");
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="lzj" />
	</body>
</html>