一、事件介绍
什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：
按钮被点击
鼠标移到元素上
输入框失去焦点
........
而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分，接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢？我们得知道有哪些常用事件，然后我们得学会如何给事件绑定函数。所以主要围绕2点来学习：
事件绑定
常用事件
二、事件绑定
JavaScript对于事件的绑定提供了2种方式：
方式1：通过html标签中的事件属性进行绑定
例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个
函数。
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<script>
function on(){
console.log("按钮1被点击了...");
}
</script>
方式2：通过DOM中Element元素的事件属性进行绑定
依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可
以通过element对象的属性来操作标签的属性。此时我们再次添加一个按钮，代码如下：
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2">
<script>
function on(){
console.log("按钮1被点击了...");
}
document.getElementById('btn2').onclick = function(){
console.log("按钮2被点击了...");
}
</script>
三、常见事件
| 事件属性名 | 说明 | 示例代码 |
|---|---|---|
| onclick | 鼠标单击事件 | <button onclick="alert('你点击了按钮')">点击我</button> |
| onblur | 元素失去焦点 | <input type="text" onblur="console.log('这个输入框失去焦点了')"> |
| onfocus | 元素获得焦点 | <input type="text" onfocus="console.log('这个输入框获得焦点了')"> |
| onload | 某个页面或图像被完成加载 | <body onload="console.log('页面加载完成')">或者<img src="example.jpg" onload="console.log('图片加载完成')"> |
| onsubmit | 当表单提交时触发该事件 | <form onsubmit="return validateForm()">（其中validateForm是一个自定义的函数用于验证表单内容） |
| onmouseover | 鼠标被移到某元素之上 | <div onmouseover="this.style.backgroundColor = 'yellow'">鼠标移上来会变色的区域</div> |
| onmouseout | 鼠标从某元素移开 | <div onmouseout="this.style.backgroundColor = 'white'">鼠标移开恢复颜色的区域</div> |