目录
1. 事件概述
HTML事件可以触发浏览器中的行为。
2. 窗口事件
由窗口触发该事件 (同样适用于 <body> 标签)：
| 属性 | 描述 |
|---|---|
| onblur | 当窗口失去焦点时运行脚本 |
| onfocus | 当窗口获得焦点时运行脚本 |
| onload | 当文档加载之后运行脚本 |
| onresize | 当调整窗口大小时运行脚本 |
| onstorage | 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本 |
2.1 案例演示
1： 当窗口失去焦点时，输出“窗口失去焦点”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
window.onblur = function () {
console.log("窗口失去焦点");
};
</script>
</body>
</html>
2：当窗口获取焦点时，输出“窗口获取焦点”
window.onfocus = function () {
console.log('窗口获得了焦点！');
};
3：窗口加载完成后
window.onload =function () {
console.log("窗口加载完成！")
};4：窗口大小改变时
window.onresize = function () {
console.log("窗口大小正在发送改变");
};3. 表单事件
表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：
3.1 案例演示
1：获得焦点时 改变背景色
var userCode = document.getElementById("userCode");
userCode.onfocus = function () {
this.style.backgroundColor = 'green';
};2：失去焦点时 改变背景色
userCode.onblur = function () {
this.style.backgroundColor = 'red';
};3：onchange 内容改变事件
var userCode = document.getElementById("userCode");
userCode.onchange = function () {
console.log(userCode.value);
};4：oninput 当文本框内容改变时 ，立即将改变内容输出在控制台
userCode.oninput = function () {
console.log(userCode.value);
};5：获取表单，未能提交时
userCode.oninvalid = function () {
console.log("请您完成表单的内容!");
};6：当文本框内容被选中时
userCode.onselect = function () {
console.log("您已经选择了文本框!");
};7：当提交表单的时候，在控制台输出“表单提交”
var myform = document.getElementById("myform");
/* 当提交表单的时候，在控制台输出“表单提交” */
myform.onsubmit = function () {
console.log("表单提交");
return false;/* 用来阻止表单提交的，你不写它会跳转请求 */
};
4. 键盘事件
通过键盘触发事件，类似用户的行为：
4.1 案例演示
1：当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
/* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
window.onkeydown = function (event) {
/* 解决兼容性问题 */
event = event || window.event;
if (event.keyCode == 65) {
console.log("true");
} else {
console.log("false");
}
};
</script>
</body>
</html>2：onkeyup 当松开按键时
window.onkeyup = function (event) {
/!* 解决兼容问题 *!/
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode == 13) {
console.log('按下了回车');
}
};5. 鼠标事件
通过鼠标触发事件，类似用户的行为：
| 属性3.1 | 描述 |
|---|---|
| onclick | 鼠标单击事件 |
| ondblclick | 鼠标双击事件 |
| onmousedown | 当鼠标按钮按下运行时 |
| onmouseup | 当鼠标按钮运行时 |
| onmousemove | 当鼠标指针移动时运行脚本 |
| onmouseover | 当鼠标移入时，不可以阻止冒泡 |
| onmouseout | 当鼠标移出时，不可以阻止冒泡 |
| onmouseenter | 当鼠标进入了当前的DIV，可以阻止冒泡 |
| onmouseleave | 当鼠标移出了当前的DIV，可以阻止冒泡 |
| onmousewheel | 当鼠标的滚轮运行时 |
| onscroll | 当滚动元素的滚动条运行时 |
5.1 案例演示
当鼠标移入，鼠标移出事件
var box = document.getElementById("box");
/* 当鼠标移入div，背景颜色变为红色 */
box.onmouseenter = function () {
this.style.background = "red";
};
/* 当鼠标移出div，背景颜色变为蓝色 */
box.onmouseleave = function () {
this.style.background = "skyblue";
};