你摸黑偷偷赶得路，都会变成意外来袭时你少受的苦
—— 24.8.29
一、什么是事件
HTML 事件可以是浏览器行为，也可以是用户行为。
当一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生，JS的事
件驱动指的就是行为触发代码运行的这种特点
二、事件的绑定方式
① 通过元素的属性绑定 on ***
② 通过DOM编程动态绑定
注意：一个事件可以同时绑定多个函数
三、常见事件
1.鼠标事件
① onmouseover —— 鼠标悬停
② onmousemove —— 鼠标移动
③ onmouseleave —— 鼠标离开
④ onclick —— 单击
⑤ ondblclick —— 双击
2.键盘事件
① onkeydown —— 键盘的按下
② onkeyup —— 键盘的开启
3.表单事件
① onfocus —— 获取焦点事件
② onblur —— 失去焦点事件
③ onsubmit —— 表单提交事件
④ onreset —— 表单重置事件
4.页面加载事件
onload
5.常见事件演示代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><script>function myFunction1() {console.log('你单击了按钮1！')}function myFunction2() {console.log('你点击了按钮2！')}function myFunction3() {console.log('你双击了按钮3！')} function myFunction4() {console.log('你按下了回车键！')}function myFunction5() {console.log('你按下了Esc键！')} function myFunction6() {console.log('你按下了空格键！')} function myFunction7() {console.log("鼠标悬停了！")}function myFunction8() {console.log("鼠标移出了！")}function myFunction9() {console.log("鼠标移动了！")}function myFunction10() {console.log("键盘按下了！")}function myFunction11() {console.log("键盘松开了！")}/*1.事件的绑定方式① 通过元素的属性绑定 on***② 通过DOM编程动态绑定注意事项：一个事件可以同时绑定多个函数2.常见的事件① 鼠标事件 onmouseover（鼠标悬停）、onmousemove（鼠标移动）、onmouseleave（鼠标离开）、onclick(单击)、ondblclick（双击）③ 键盘事件 onkeydown（键盘的按下）、onkeyup（键盘的开启）、onkeypress（某个键盘按键被按下并松开）③ 表单事件 onfocus(获取焦点事件)、onblur（失去焦点事件）、onsubmit（表单提交事件）、onreset（表单重置事件）④ 页面加载事件 onload3.事件的触发① 行为触发② DOM编程触发*/function testFocus() {console.log("获取焦点了！")}function testBlur() {console.log("失去焦点了！")}function testSubmit() {console.log("提交了！")}function testChange(value) { console.log("内容改变为："+value)}function testChange2(){console.log("选项改变了！")}function testSubmit(){/*弹窗的三种方式alert("表单发生提交了！"); 信息提交框confirm("你确定要提交吗？") 信息确认框prompt("请输入你的评论：") 信息输入框*/var result = confirm("你确定要提交吗？");if(result){alert("表单发生提交了！");}else{alert("表单未提交！");event.preventDefault();// 阻止组件的默认提交行为，可以动态选择}}function testReset(){console.log("表单重置了！")} </script></head>
<body><!-- 鼠标事件 --><input type="button"value="按钮"onclick="myFunction1(), myFunction2()"ondblclick="myFunction3()"><br><!-- 键盘事件 --><img src="img/夕阳.jpg" onmouseover="myFunction7()" onmouseout="myFunction8()" onmousemove="myFunction9()"><br><input type="text" onkeydown="myFunction10()" onkeyup="myFunction11()"><br><!-- 表单事件 --><form action="01JS引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">用户昵称：<input type="text" name="realName" onfocus="testFocus()"onblur="testBlur()"onchange="testChange(this.value)"> <br>登陆账号：<input type="text" name="logoinName"onfocus="testFocus()"onblur="testBlur()"onchange="testChange()"><br>选择籍贯：<select name="province"onchange="testChange2()"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option>密码：<input type="password" name="password"onfocus="testFocus()"onblur="testBlur()"onchange="testChange()"><br><input type="submit" value="注册"><input type="reset" value="重置"><br>
</body>
</html>四、事件的触发
1.行为触发
2.DOM编程触发
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/*1.事件的绑定方式① 通过元素的属性绑定 on***② 通过DOM编程动态绑定注意事项：一个事件可以同时绑定多个函数2.常见的事件① 鼠标事件 onmouseover（鼠标悬停）、onmousemove（鼠标移动）、onmouseleave（鼠标离开）、onclick(单击)、ondblclick（双击）③ 键盘事件 onkeydown（键盘的按下）、onkeyup（键盘的开启）、onkeypress（某个键盘按键被按下并松开）③ 表单事件 onfocus(获取焦点事件)、onblur（失去焦点事件）、onsubmit（表单提交事件）、onreset（表单重置事件）④ 页面加载事件 onload （页面加载完成事件）、onunload（页面卸载事件）3.事件的触发① 行为触发② DOM编程触发*/</script> <script>function ready(){// 通过DOM获得要操作的元素var btn = document.getElementById("btn1");// 绑定一个单击事件，直接声明一个函数btn.onclick = function(){alert("按钮被单击了！");}}window.onload = function(){// 为div1绑定单击事件，单击变红var div1 = document.getElementById("d1");div1.onclick = function(){div1.style.backgroundColor = "red";}// 通过DOM获得要操作的元素var btn = document.getElementById("btn1");// 绑定一个单击事件，直接声明一个函数btn.onclick = function(){alert("按钮被单击了！");// 通过DOM编程动态绑定一个事件，相当于某些事件被触发了div1.onclick(); // 触发div的单击事件}}</script><style> .div1{width: 100px;height: 100px;background-color: yellow;}</style>
</head>
<body><div id="d1" class="div1"></div><button id="btn1">按钮</button>
</body>
<!--
<body onload="ready()"><button id="btn1">按钮</button>
</body>
-->
</html>
