【JavaScript学习笔记16】JS中事件的三要素（以最简单的点击事件为例）

程序员文章站 2022-05-07 21:44:32

...

引言

JS本来就是以事件驱动为核心的一门语言，很多控件以及布局都是基于事件的基础，包括上一章介绍的document对象，本质上就是在处理事件。

事件三要素

事件源：获取事件源

函数	功能
document.getElementById	通过id获取事件源
document.getElementsByClassName	通过类名获取事件源
document.getElementsByTagName	通过标签名字获取事件源
document.querySelector	通过query选择器获取传入类的第一个按钮
document.querySelectorAll	通过query选择器获取此类中的所有按钮

事件：绑定事件
在大神的博客看到总结的非常好，大家可以跳转查阅一下JS的事件大全：JS事件总结大全
事件驱动程序：书写事件驱动程序

编码实现事件

这里以按钮点击事件为例，介绍最简单的事件：

//1、获取事件源
    //1.1通过id获取事件源，此处获取第一个按钮
    var btn1 = window.document.getElementById("btn");
    //1.2通过类名获取事件源，此处获取第二个按钮
    var btn2 = window.document.getElementsByClassName("btn-class")[1];
    //1.3通过标签名字获取事件源，此处获取第三个按钮
    var btn3 = window.document.getElementsByTagName("button")[2];
    //1.4通过query选择器获取传入类的第一个按钮
    var btn4 = window.document.querySelector(".btn-class");
    //1.5通过query选择器获取此类中的所有按钮
    var btn5 =window.document.querySelectorAll(".btn-class");
    
    //验证btn3
    console.log(btn3);
    //验证btn4
    console.log(btn4);
    //验证btn5
    console.log(btn5);

    //2、绑定事件
    //2.1匿名函数绑定按钮1事件
    btn1.onclick=function () {
        //3、事件驱动程序
        alert("点击第一个按钮");
    };

    //2.2使用有名函数绑定按钮2事件
    btn2.onclick =btn2_fun;
    function btn2_fun() {
        //3、事件驱动程序
        alert("点击第二个按钮");
    };

执行结果：

首先验证按钮1，按钮2，绑定了事件
通过控制台验证按钮btn3,btn4,btn5

Onload函数

事件的获取是在script标签中执行，但是一些控件的定义不一定在script标签之前，因为JS程序是从头往下进行的，如果事件涉及到的控件还没有定义就执行程序，会造成很多错误。因此，一般在script标签中将所有的事件绑定函数写在Onload函数内，能够有效预防错误。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            //1、获取事件源
            //1.1通过id获取事件源，此处获取第一个按钮
            var btn1 = window.document.getElementById("btn");
            //2、绑定事件
            //2.1匿名函数绑定按钮1事件
            btn1.onclick=function () {
                //3、事件驱动程序
                alert("点击第一个按钮");
            };
        }
    </script>
</head>
<body>
<button id ="btn" class ="btn-class">第一个按钮</button>
<button class ="btn-class"> 第二个按钮</button>
<button>第三个按钮</button>
</body>
</html>

【JavaScript学习笔记16】JS中事件的三要素（以最简单的点击事件为例）