JavaScript进阶：事件和事件处理

Dorable_Wander

已于 2022-12-09 00:58:57 修改

阅读量1.5k

点赞数 5

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-09-17 16:40:45 首次发布

本文链接：https://blog.csdn.net/XSL_HR/article/details/126907267

版权

JavaScript 内容总结事件和事件处理

本期文章是关于JavaScript事件的基础知识整理

6.5事件和事件处理

6.5.1 概念

事件概念：发生一件事情执行对应行为

发生一件事情：我点击了电脑的“开机按钮”

执行对应行为：电脑启动了

6.5.2 JS事件由哪些部分组成

1外部动作：我点击了一个HTML元素(例如：按钮)

2 事件源：真实存在的一个HTML元素,例如：按钮

3 事件：单击事件、双击事件等等

4 事件监听者：监听外部动作(一旦我点击某个按钮就会触发)

5 事件处理者：通常是一个函数体，用来处理事件执行的行为

入门案例：我点击一个按钮，弹出一个警告框，打印“我被点击了”

步骤：1 定义事件源 例如：按钮
     2 在事件源上定义“单击事件”  onclick
	 3 将事件监听者注册到事件源上   οnclick="myClick()" 此时myClick是我定义的函数
	 4 编写事件监听者的函数  function myClick(){}
	 5 编写事件处理者的函数体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    此时我们定义了一个事件源：按钮。但是点击没有效果，因为还没有为事件源创建事件，也没有将事件监听者注册到事件源上
    οnclick="" onclick表示事件源button按钮创建的一个"单击事件"
    JS所有的事件都是以on开头，表示我在事件源上创建了一个“单击事件”

    定义了事件源创建了单击事件还是无法达到我们的目的，因为此时我们没有定义事件监听者。
    此时myClick()是一个事件监听者注册到事件源了，定义了事件监听者还是无法达到我们的目的，我们必须为事件监听者绑定一个函数
    -->
    <input type="button" id="btn" value="点击我" onclick="myClick()"/>

    <script>
        // 事件监听者绑定的函数，必须和onclick里面的值保持一致
        function myClick(){
     
            // 函数体就是事件处理者
            alert("我被点击了");
        }
    </script>
</body>
</html>

6.6事件介绍

6.6.1 窗体加载事件

onload事件，事件源可以是body，也可以是window窗体对象。

当窗体的所有HTML元素成功加载就会触发onload事件。该事件有一个别名：初始化事件。

onload何时会触发呢？onload事件是主动触发的，一旦所有的HTML元素全部加载到浏览器内部的DOM树就会触发该事件。

场景：body元素作为事件源，定义一个onload事件，HTML页面加载成功之后，触发该事件，打印P元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log("start");
        /**
         * load()事件监听者绑定的一个函数
         * 步骤：1 根据id获取P元素
         *       2 打印P元素的内容
         * 注意：onload事件触发之前，P元素已经成功的加载到浏览器的DOM树了
         */
        function load(){
     
            let first = document.getElementById("first");
            let  content = first.innerHTML;
            alert(content);
        }
        console.log("end");
    </script>
</head>
<body onload="load()">
    <p id="first">我是一个P</p>
</body>
</html>

上一个示例，HTML和JS耦合在一起了，有没有办法将他们分开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    为window对象注册一个onload事件，所有的HTML元素成功加载到浏览器之后就会触发
    场景：定义一个P标签，然后为window对象注册一个onload事件，HTML元素成功加载之后，就会触发onload事件，将系统当前
    时间显示在P元素(标签)里面
    步骤：1 定义HTML(结构)
         2 定义CSS样式(表现)
         3 定义JS(行为)
            3.1 为window窗体对象注册一个onload事件
            3.2 编写事件处理者，将当前的系统时间设置到P标签里面
    -->
    <style>
        #first{
     
            width:50%;
            height:100px;
            border:3px solid red;
        }
    </style>
    <script>
        /**
         * 所有HTML元素加载到当前窗体之后触发window的onload事件
         * 此时的匿名函数是一个事件监听者，使用赋值运算符=将它注册到事件源window
         * = 是一个Hook(钩子)，它勾起了事件监听者和事件源
         */
        window.onload = function (){
     
            let first = document.getElementById("first");
            let dt = new Date();
            first.innerHTML = dt;
        }
    </script>
</head>
<body>
    <p id="first"></p>
</body>
</html>

小结： onload事件也是一个初始化事件，它是一个主动触发的事件,当所有HTML元素加载完毕就会触发。

6.6.2 单击事件

onclick的事件源通常是一个按钮

场景：有一个按钮，有一个P标签。单击按钮触发一个单击事件。创建定时器对象，将当前时间显示在P标签里面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #first{
     
            width:50%;
            height:100px;
            border:3px solid red;
        }
    </style>
    <!--
    1 定义window的onload事件加载窗体
    2 根据id获取Button按钮
    3 为按钮注册(绑定)一个单击事件
    4 定义匿名函数作为事件处理者
    5 创建定时器，每隔1000毫秒执行一次
    6 根据id获取P元素
    7 创建Date对象
    8 将当前时间赋值个P元素的内容
    -->
    <script>
        window.onload = function(){
     
            let btn = document.getElementById("btn");
            // 为按钮注册一个单击事件
            /***
             * btn此时表示“事件源”，它是一个按钮
             * onclick是事件源的一个“单击事件”
             * function(){} 事件监听者，监听“外部动作”
             * 匿名函数体：事件处理者，一旦触发了单击事件就会执行匿名函数体
             * 我点击按钮：外部动作触发事件
             */
            btn.onclick = function(){
     
                // setInterval定时器
                le