JavaScript 事件监听器 `addEventListener()` 方法及基本事件

最新推荐文章于 2025-03-31 18:16:40 发布

一只蜗牛儿

最新推荐文章于 2025-03-31 18:16:40 发布

阅读量2.7k

点赞数 5

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42978535/article/details/142763967

版权

在现代网页开发中，JavaScript 事件处理是实现用户交互的重要部分。addEventListener() 方法是添加事件监听器的标准方式，它允许我们对 DOM 元素的特定事件进行响应。本文将详细介绍 addEventListener() 的用法以及一些基本事件的示例。

一、`addEventListener()` 方法

addEventListener() 方法用于在指定元素上注册一个事件监听器。其语法如下：

element.addEventListener(event, function, useCapture);

event：一个字符串，表示要监听的事件类型（如 "click"、"mouseover" 等）。
function：当事件发生时要执行的函数（也称为回调函数）。
useCapture：一个可选的布尔值，指示是否在捕获阶段调用事件处理程序。默认为 false，表示在冒泡阶段调用。

示例

下面的示例展示了如何使用 addEventListener() 监听点击事件：

<!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.addEventListener('click', function() {
            alert('按钮被点击了！');
        });
    </script>
</body>
</html>

在这个示例中，点击按钮时会弹出一个警告框。

二、常见的事件类型

以下是一些常用的事件类型及其说明：

1. 点击事件 (`click`)

当用户单击元素时触发。

button.addEventListener('click', function() {
    console.log('按钮被点击');
});

2. 鼠标悬停事件 (`mouseover`)

当鼠标指针移动到元素上时触发。

button.addEventListener('mouseover', function() {
    console.log('鼠标悬停在按钮上');
});

3. 鼠标移出事件 (`mouseout`)

当鼠标指针移出元素时触发。

button.addEventListener('mouseout', function() {
    console.log('鼠标移出了按钮');
});

4. 键盘按下事件 (`keydown`)

当用户按下键盘上的任意键时触发。

document.addEventListener('keydown', function(event) {
    console.log(`按下的键是: ${event.key}`);
});

5. 表单提交事件 (`submit`)

当用户提交表单时触发。

<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(); // 阻止默认提交行为
        console.log('表单被提交');
    });
</script>

6. 文档加载完成事件 (`DOMContentLoaded`)

当初始的 HTML 文档被完全加载和解析后触发。

document.addEventListener('DOMContentLoaded', function() {
    console.log('文档加载完成');
});

三、移除事件监听器

如果需要移除已添加的事件监听器，可以使用 removeEventListener() 方法。注意，移除事件监听器时，必须传入相同的事件类型和函数引用。

示例

function handleClick() {
    console.log('按钮被点击');
}

button.addEventListener('click', handleClick);

// 移除事件监听器
button.removeEventListener('click', handleClick);