你摸黑偷偷赶得路，都会变成意外来袭时你少受的苦
—— 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（表单重置事件）
④ 页面加载事件 onload
3.事件的触发
① 行为触发
② 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>
