JavaScript学习笔记——事件

事件简介

事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等

JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的

事件的三要素

事件源：引发后续事件的html标签
事件：js
事件驱动程序：对样式和html的操作，也就是DOM

也就是说，我们可以在时间对应的属性中写一些js代码，当事件被触发时，这些代码将会执行

获取事件源的方式（DOM节点的获取）

详见前文—— DOM元素节点的获取

绑定事件的方式

方式一：直接绑定匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">点击警告</div>

    <script>
        // 1、获取事件源
        var div = document.getElementById("box1");
        // 2、绑定事件
        div.onclick = function () {
    
    
        // 3、书写事件驱动程序
            alert("弹出警告");
        }
    </script>
</body>
</html>

方式二：先单独定义函数，再绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">点击警告</div>

    <script>
        // 1、获取事件源
        var div = document.getElementById("box1");
        //2、绑定事件
        div.onclick = _Alert;//注意是_Alert，而不是_Alert()。_Alert()指的是返回值
        // 3、单独定义函数
        function _Alert() {
    
    
            alert("弹出警告");
        }
    </script>
</body>
</html>

注意上方代码的注释：

绑定的时候，是写fn，不是写fn()。
fn代表的是整个函数，而fn()代表的是返回值

方式三：行内绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1" onclick="_Alert()">点击警告</div> 
    //注意这里是_Alert(),而不是_Alert

    <script>
        // 1、获取事件源
        var div = document.getElementById("box1");
        //2、单独设置事件函数
        function _Alert() {
    
    
            alert("弹出警告");
        }
    </script>
</body>
</html>

注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串

事件驱动程序

对DOM操作的函数

常见事件

在这里插入图片描述