JavaScript的事件监听

最新推荐文章于 2024-07-16 20:08:38 发布

兔朱迪的万花筒

最新推荐文章于 2024-07-16 20:08:38 发布

阅读量851

点赞数 16

分类专栏： Web 前端文章标签： javascript 前端开发语言 html

本文链接：https://blog.csdn.net/u010852547/article/details/137117276

版权

Web 前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了事件监听在计算机编程，特别是GUI编程中的重要性，包括事件的概念、如何通过事件监听器和回调函数响应用户交互和系统状态变化，以及在JavaScript中的两种事件绑定方法。

摘要由CSDN通过智能技术生成

事件监听是计算机编程中的一个重要概念，特别是在图形用户界面（GUI）编程和网络编程中。它涉及到设置一个或多个监听器（也称为事件处理器或回调函数）等待特定事件的发生，并在事件发生时执行相应的操作或响应。

事件监听是构建交互式应用程序的关键部分。它允许程序根据用户的输入或系统状态的变化做出响应，从而提供更加丰富和动态的用户体验。

1、事件

事件是某个特定动作或状态变化的信号。事件可能由用户交互（如点击按钮或移动鼠标）触发，或由系统状态变化（如文件被修改或网络连接断开）触发。事件是程序执行流程中的一个关键点，通常与事件监听器一起使用，以改变程序的正常执行流程。

2、事件监听

事件监听是一种机制，用于检测特定事件的发生并在事件发生时执行相应的代码。具体来说，事件监听器是一个程序组件，它等待特定事件（如用户点击或系统状态变化）的发生。一旦事件被触发，事件监听器就会执行其关联的事件处理函数（或称为回调函数），以响应事件。

事件监听通常包括以下步骤：

定义事件处理函数：这是将在事件发生时执行的代码。它可以是简单的函数，也可以是更复杂的操作序列。
注册事件监听器：将事件处理函数与特定事件关联起来。这通常涉及将事件处理函数绑定到某个对象或应用程序的特定部分。
等待事件触发：一旦事件监听器被注册，它就会开始等待相关事件的发生。这可以是用户交互，也可以是系统状态的变化。
执行事件处理函数：当事件被触发时，事件监听器会调用其关联的事件处理函数，并执行相应的代码。

3、JavaScript事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

定义一个按钮元素，在该标签上定义事件属性，在事件属性中绑定函数。onclick就是单击事件的事件属性。οnclick='on（）'表示该点击事件绑定了一个名为 on()的函数。

方式二：通过 DOM 元素属性绑定

按钮标签上不使用事件属性，绑定事件的操作在 JavaScript代码中实现，JS代码获取id='btn'的元素对象，然后将onclick作为该对象的属性，并且绑定匿名函数，函数在事件触发后自动执行。

绑定匿名函数：将一个没有名字的函数绑定到某个对象或事件上。

匿名函数通常用于一次性操作，不需要在代码的其他地方引用该函数。通过绑定，可以使这个匿名函数在特定的事件或条件下被调用。在JavaScript中，匿名函数非常常见，特别是在事件监听器和回调函数中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("点");
        }
        <!--方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件-->
        document.getElementById("btn").onclick = function (){
            alert("点点点");
        }
    </script>
</body>
</html>

4、事件属性有哪些

事件属性名	描述
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开