一、事件的概念

HTML事件是发生在HTML元素上的“事情”，是浏览器或用户做的某些事情。

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

二、常见事件

属性

此事件发生在何时

onclick

当用户点击某个对象时调用的事件句柄

ondblclcik

当用户双击某个对象时调用的事件句柄

onchange

域的内容被改变

onblur

元素失去焦点

onfocus

元素获得焦点

onload

一张页面或一幅图像完成加载

onsubmit

确认按钮被点击；表单被提交

onkeydown

某个键盘按键被按下

onkeypress

某个键盘按键被按住

onkeyup

某个键盘按键被松开

onmousedown

鼠标按钮被按下

onmouseup

鼠标按键被松开

onmouseout

鼠标从某元素移开

onmouseover

鼠标移到某元素之上

onmousemove

鼠标被移动

三、事件绑定的方式

3.1 普通函数方式

设置标签的属性

<标签  属性="JS代码，调用函数"></标签>

3.2 匿名函数方式

<script>
        标签对象.事件属性 = function () {
            // 执行代码块
        }
    </script>

3.3 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的事件驱动</title>
</head>
<body>
<!--
    什么是事件驱动：让文档中的标签能响应用户的交互动作
    事件驱动中的要素：
        1. 事件源：事件发生在哪
        2. 事件类型：用户的交互动作是什么
        3. 事件源与事件类型进行绑定：要给谁绑定一个什么事件
        4. 绑定之后，当事件触发要指定执行的函数
-->
    <input type="button" value="按钮" onclick="fn1()"><br/>
    <input type="button" id="btn" value="另一个按钮"><br/>
    <script>
        function fn1() {
            alert("我被点击了")
        }

        // 另一种绑定事件的方式：动态绑定，使用js代码进行事件绑定
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("我也被点击了.....")
        }
    </script>
</body>
</html>

四、事件的使用介绍

4.1 内容改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change事件</title>
</head>
<body>
<select onchange="fn1(this)">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="sz">深圳</option>
</select>

<script>
    // 目标：当下拉框的城市名发生改变的时候，获取当前下拉框显示的城市名
    function fn1(obj) {
        // 要获取当前下拉框的内容，其实就是获取当前select对象的文本（innerText）
        console.log("我的内容改变了...."+obj.value)
    }
</script>
</body>
</html>

4.2 获得焦点（onfocus）和失去焦点（onblur）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
</head>
<body>
    <input type="text" id="ipt" onfocus="fn1()"/>
<script>
    // 目标：给输入框绑定获取和失去焦点事件
    function fn1(){
        console.log("我获取焦点了.....")
    }

    // onblur表示失去焦点
    document.getElementById("ipt").onblur = function () {
        console.log("我失去焦点了.....")
    }
</script>
</body>
</html>

4.3 键盘、鼠标相关事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘和鼠标事件</title>
</head>
<body>
    <input type="text" onmouseover="fn1()" onmouseout="fn2()" onkeydown="fn3(this)" onkeyup="fn4(this)">
    <script>
        // onmouseover是鼠标移入事件
        function fn1() {
            console.log("鼠标移入了...")
        }

        // onmouseout是鼠标移出事件
        function fn2() {
            console.log("鼠标移出了...")
        }

        //onkeydown是键盘按下事件，此时键盘的字符并未进入输入框
        function fn3(obj) {
            console.log("键盘按下事件..."+obj.value)
        }

        //onkeyup是键盘抬起事件，此时键盘的字符已经进入输入框
        function fn4(obj) {
            console.log("键盘抬起事件..."+obj.value)
        }
    </script>
</body>
</html>

学海无涯苦作舟