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";
    };