【Web前端】系统中正在发生的“事件”

一条晒干的咸鱼

发布于 2024-11-19 19:49:28

83900

代码可运行

文章被收录于专栏：learnlearn

运行总次数：0

代码可运行

事件是在你编写的程序中发生的特定行为，系统会传递这些事件的信息，以便你的代码能够做出相应的反应。举个例子，当用户在网页上点击一个按钮时，你可能希望通过弹出一个信息框来回应这一操作。

什么是事件？

事件是在编写的程序中产生的特定情况。当这些事件出现时，系统会发出信号，并提供一种机制，允许你自动执行某些操作（比如运行代码）。这些事件通常是在浏览器窗口内触发的，关联到其中的特定元素。这可以是单个元素、一组元素、当前加载的HTML文档，或整个浏览器窗口。各种类型的事件都有可能发生。

例如：

用户选择、点击或将光标悬停在某个元素上。
用户按下键盘上的某个键。
用户调整浏览器窗口的大小或关闭它。
网页完成加载。
表单被提交。
视频播放、暂停或结束。
发生错误。

要对某个事件做出反应，为其添加一个事件处理器。这通常是你作为程序员编写的 JavaScript 函数，它会在事件发生时被执行。当你定义了一个代码块来响应该事件时，我们称之为注册事件处理器。需要注意的是，事件处理器有时也被称作事件监听器——这两个术语在我们的讨论中可以视为同义词。尽管从严格意义上讲，这段代码既监控又处理事件，但监听器主要关注事件的发生，而处理器则负责对事件采取相应的行动。

处理点击事件

假设用户在网页上单击一个按钮，我们希望在用户单击时显示一条消息。这就是一个典型的事件处理示例。下面是一个简单的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理示例</title>
</head>
<body>
    <button id="myButton">点击我!</button>
    <script>
        const button = document.getElementById('myButton');
        button.onclick = function() {
            alert('按钮被点击了!');
        };
    </script>
</body>
</html>

onclick事件处理器在用户单击按钮时被触发，随后通过 alert() 函数显示一条消息。这是事件处理的基本形式。

使用 `addEventListener()`

addEventListener() 方法是现代 JavaScript 中注册事件处理器的推荐方式。它允许我们添加多个事件监听器，并在需要时方便地移除这些监听器。

添加事件监听器

使用 addEventListener()方法来添加事件监听器，可以接受三个参数：

事件类型（字符串，例如 'click'）。
事件处理函数。
可选的配置对象（布尔值或对象）。

button.addEventListener('click', function() {
    alert('按钮被点击了！');
});

监听其他事件

除了 click 事件，addEventListener() 还能处理多种类型的事件，例如：

input：当用户输入内容时触发。
mouseover：当鼠标悬停在元素上时触发。
keydown：当按下键盘键时触发。

<input id="myInput" type="text" placeholder="输入一些文本..." />
<script>
    const input = document.getElementById('myInput');
    input.addEventListener('input', function() {
        console.log('当前输入的内容:', this.value);
    });
</script>

移除监听器

可以使用 removeEventListener() 方法移除之前添加的监听器。需要确保传递的处理函数与添加时完全相同。

function handleClick() {
    alert('按钮被点击了！');
}
button.addEventListener('click', handleClick);

// 在需要时可以移除监听器
button.removeEventListener('click', handleClick);

在单个事件上添加多个监听器

addEventListener() 允许为相同的事件类型注册多个处理程序，这样就可以实现各自独立的行为。

button.addEventListener('click', function() {
    alert('第一次处理！');
});
button.addEventListener('click', function() {
    alert('第二次处理！');
});

这个例子中，单击按钮将依次触发两个不同的事件处理程序。

其他事件监听器机制

事件处理器属性

除了 addEventListener() 和 removeEventListener() 方法外，HTML 元素还可以使用事件处理器属性。这种方法虽然有效，但并不推荐使用，它会使代码的结构较为混乱。

<button id="myButton" onclick="alert('按钮被点击了！')">点击我!</button>

内联事件处理器——不要使用

虽然在HTML中使用内联事件处理器很方便，但这不是一个好习惯。它减少了代码的可维护性，增加了耦合度。建议使用 addEventListener()。

事件对象

当事件发生时，JavaScript会生成一个事件对象，包含有关事件的详细信息。在事件处理程序中，可以通过参数访问此对象。

事件对象的额外属性

以下是一些常用的事件对象属性：

target：事件的目标元素。
type：事件的类型（例如 click）。
preventDefault()：阻止默认事件发生，如在表单提交时防止页面刷新。
stopPropagation()：停止事件冒泡。

button.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为
    console.log('事件类型:', event.type);
    console.log('事件目标:', event.target);
});

阻止默认行为

在某些情况下，您可能希望阻止浏览器执行事件的默认行为。例如，提交一个表单时，默认行为是刷新页面。可以通过调用 event.preventDefault() 实现。

<form id="myForm">
    <input type="text" placeholder="输入文本" />
    <button type="submit">提交</button>
</form>
<script>
    const form = document.getElementById('myForm');
    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交
        alert('表单提交被阻止！');
    });
</script>

事件并不独占于网页

事件并不是 JavaScript 独有的，大多数编程语言都有自己的事件模型，而这些模型的实现方式常常各不相同。实际上，网页中使用的 JavaScript 事件模型与其他环境下的 JavaScript 事件模型也存在差异。

例如，Node.js 是一个广受欢迎的 JavaScript 运行时，允许开发者使用 JavaScript 构建网络和服务器端应用程序。在 Node.js 中，事件模型依赖于监听器来监控事件，而发射器则用来定期触发事件。虽然听起来没有什么不同，但在代码实现上却大相径庭，比如使用 on() 函数注册事件监听器，而 once() 则用于注册一个一次性的事件监听器，该监听器运行一次后会自动注销。HTTP 连接事件文档就是一个很好的例子。

另外，你还可以通过一种名为 WebExtensions 的技术来编写 JavaScript，以创建跨浏览器的扩展功能。这种事件模型与网页中的事件模型类似，但有所不同——事件监听器的属性采用驼峰命名法（例如 onMessage 而不是 onmessage），并且需要与 addListener 函数结合使用。