HTML | DOM addEventListener() 方法

简介

addEventListener() 方法是一种用于添加事件监听器的 DOM 方法。它允许程序员注册特定事件类型的监听器，以便在事件发生时执行对应的函数。

语法

element.addEventListener(event, function, useCapture);

• element：需要添加事件监听器的 DOM 元素。
• event：事件类型，如 "click"、"mouseover" 等。
• function：事件触发时执行的函数或函数引用。
• useCapture（可选）：布尔值，用于指定事件是在捕获阶段还是冒泡阶段进行监听。默认为 false，即在冒泡阶段进行监听。

用法示例

示例一：点击按钮时触发事件

// 获取按钮元素
let btn = document.getElementById("myButton");

// 定义事件处理函数
function handleClick() {
  console.log("Button clicked!");
}

// 注册点击事件监听器
btn.addEventListener("click", handleClick);

示例二：移入和移出时改变文本颜色

// 获取文本元素
let text = document.getElementById("myText");

// 定义移入事件处理函数
function handleMouseEnter() {
  text.style.color = "red";
}

// 定义移出事件处理函数
function handleMouseLeave() {
  text.style.color = "black";
}

// 注册移入和移出事件监听器
text.addEventListener("mouseenter", handleMouseEnter);
text.addEventListener("mouseleave", handleMouseLeave);

示例三：使用事件对象获取事件相关信息

// 获取文本输入框元素
let input = document.getElementById("myInput");

// 定义输入事件处理函数
function handleInput(event) {
  console.log("Input value:", event.target.value);
  console.log("Event type:", event.type);
}

// 注册输入事件监听器
input.addEventListener("input", handleInput);

进一步学习

• MDN 文档 - addEventListener()

以上是关于 addEventListener() 方法的简介及用法示例。这个方法极大地简化了 JavaScript 中的事件处理，使得程序员能够更方便地与用户交互。希望这篇介绍对开发者们有所帮助！