2024-08-10发表2024-08-10更新编程 / Javascript小白5 分钟读完 (大约823个字)0次访问

23 事件处理之添加事件监听器

在上一篇中，我们讨论了事件的基本概念，包括事件是如何在JavaScript中工作的以及其产生的方式。现在，我们将深入到事件处理的一个关键部分——添加事件监听器。通过这个过程，我们能够让我们的网页对用户的交互作出回应。

什么是事件监听器？

事件监听器是一个函数，它会在特定事件发生时被调用。换句话说，它“监听”事件的产生，并在事件发生时执行相应的回调函数。通过事件监听器，开发者可以实现对交互动作的响应，比如点击、悬停、输入等。

如何添加事件监听器？

在JavaScript中，我们使用 addEventListener 方法来将事件监听器附加到指定的元素上。其基本语法如下：

1	element.addEventListener(event, function, useCapture);

event：指定要监听的事件类型，例如 'click', 'mouseover' 等。
function：当事件发生时要执行的函数。
useCapture：一个布尔值，指示是否在捕获阶段执行回调，通常情况下设置为 false。

示例：添加点击事件监听器

以下是一个简单的例子，展示如何为按钮添加点击事件监听器：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听器示例</title>
    <style>
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <button id="myButton">点击我</button>

    <script>
        // 获取按钮元素
        const button = document.getElementById('myButton');

        // 定义点击事件处理函数
        function handleClick() {
            alert('按钮被点击了！');
        }

        // 添加事件监听器
        button.addEventListener('click', handleClick);
    </script>
</body>
</html>

在上述代码中，当用户点击按钮时，会弹出一个提示框，显示“按钮被点击了！”的消息。

事件监听器的多个添加

你可以为同一个元素添加多个事件监听器。比如，我们可以为同一个按钮添加 mouseover（鼠标悬停）和 click（点击）事件监听器：

function handleMouseOver() {
    console.log('鼠标悬停在按钮上');
}

button.addEventListener('mouseover', handleMouseOver);
button.addEventListener('click', handleClick);

在这个例子中，用户在悬停时控制台会输出消息。

移除事件监听器

有时候，我们需要移除已添加的事件监听器。为此可以使用 removeEventListener 方法。它的语法与 addEventListener 基本相同，你只需要提供相同的事件类型和函数引用。

1	button.removeEventListener('click', handleClick);

小结

在本篇教程中，我们学习了如何添加事件监听器，使得我们的网页能够对用户的动作做出反应。通过使用 addEventListener 方法，我们可以轻松地处理多种事件，提升用户体验。关于 事件处理之事件冒泡和捕获 的内容将进一步说明事件是如何在DOM中传播的，这对于理解事件处理的深层机制非常重要。

即将到来的下一篇文章将带你走进 事件冒泡与捕获 的世界，帮助你更好地理解事件的流动及其对我们代码的影响。请继续关注！

23 事件处理之添加事件监听器

https://zglg.work/javascript-zero/23/

作者

IT教程网(郭震)

发布于

2024-08-10

更新于

2024-08-10

许可协议

#Javascript小白

23 事件处理之添加事件监听器

什么是事件监听器？

如何添加事件监听器？

示例：添加点击事件监听器

事件监听器的多个添加

移除事件监听器

小结

作者

发布于

更新于

许可协议

分享转发

学习下节

复习上节

交流

打卡评论