什么是事件
HTML 事件可以是浏览器行为，也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点
如果事件没有对应的JS函数运行，事件仍然是发生的
常见
事件的绑定
1 通过元素属性绑定（on***）
2 通过DOM编程动态绑定
注意事项：
1 一个事件可以绑定多个函数
2 一个元素可以同时绑定多个事件
常见的事件：
1 鼠标事件 onclick ondbclick onmouseover(鼠标悬停) onmousemove(鼠标移动) onmouseleave(鼠标离开)
代码举例：
<!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>
function fun1(){
console.log("鼠标事件：单击")
}
function fun2(){
console.log("鼠标事件：双击")
}
function fun3(){
console.log("鼠标事件：鼠标悬停")
}
function fun4(){
console.log("鼠标事件：鼠标移动")
}
function fun5(){
console.log("鼠标事件：鼠标移开")
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="fun1()"/>
<input type="button" value="按钮2" ondblclick="fun2()"/>
<hr/>
<img src="/demo1-HTML/img/logo.png" onmouseover="fun3()" onmousemove="fun4()" onmouseleave="fun5()"/>
</body>
</html>2 键盘事件 onkeydown(键盘按键按下) onkeyup(键盘按键抬起)
代码举例：
<!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>
function fun1(){
console.log("键盘按下")
}
function fun2(){
console.log("键盘抬起")
}
</script>
</head>
<body>
输入内容：<input type="=text" onkeydown="fun1()" onkeyup="fun2()"/>
</body>
</html>3 表单事件 onfocus(获得焦点（光标）) onBlur(失去焦点（光标）) onchange(内容改变)
onsubmit(提交表单——————是form的属性，是表单提交)
onreset(重置表单——————是from的属性，是表单重置)
补充：弹窗的三种方式
alter()信息提示框
prompt()信息输入框
confirm()信息确认框（如果点确认则返回true反之false）
代码举例：
<!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>
function testFocus(){
console.log("获得焦点")
}
function testBlur(){
console.log("失去焦点")
}
function testChange(value){
alert("内容改变为"+value)
}
function testSubmit(){
alert("表单发生提交了")
//在这里我们有机会阻止表单的提交
//方式一：
//event.preventDefault()//组织组件的默认行为
//方式二：
var flag=confirm("确认要提交表单吗？")
if(!flag){
return false//这里的范围值放回给调用者onsubmit
}
return true
}
function testReset(){
alert("表单要重置了")
}
</script>
</head>
<body>
<form action="demo3-js\练习\01js引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">
用户姓名：<input type="text" name="username" onfocus="testFocus()" onblur="testBlur()"/><br/>
用户密码：<input type="password" name="userpwd"/><br/>
<select onchange="testChange(this.value)"> <!--onChange还可以接收改变后的值-->
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<br/>
<input type="submit" value="注册"/>
<!--这里的return是将布尔值返回给浏览器-->
<input type="reset" value="清空"/>
</from>
</body>
</html>