DOM 事件

JavaScript HTML DOM 事件

HTML DOM（文档对象模型）允许 JavaScript 对 HTML 事件做出反应，使网页具有交互性。事件是发生的动作，例如用户点击一个元素、页面加载完成或输入字段改变。

使按钮具有交互性的示例：

// HTML：
// <button id="interactiveButton">Click Me</button>
// <p id="messageArea"></p>

// JavaScript：
const button = document.getElementById('interactiveButton');
const messageArea = document.getElementById('messageArea');

if (button && messageArea) { // 确保元素存在
  button.addEventListener('click', function() {
    messageArea.textContent = 'Button was clicked at ' + new Date().toLocaleTimeString();
  });

  button.addEventListener('mouseover', function() {
    button.style.backgroundColor = 'lightgreen';
  });

  button.addEventListener('mouseout', function() {
    button.style.backgroundColor = ''; // 重置背景
  });
}

响应事件

当事件发生时，可以执行 JavaScript 代码。这段代码被称为事件处理程序（event handler）或事件监听器（event listener）。

分配事件处理程序的常用方法（addEventListener() 是推荐的现代方法）：

1. 使用 addEventListener()（推荐）：

这是最灵活和标准的方法。它允许为同一个元素的同一事件添加多个监听器。

const myElement = document.getElementById('myElem');
myElement.addEventListener('click', function() {
  this.innerHTML = 'Clicked with addEventListener!'; // 'this' 指的是 myElement
});

2. 赋值给 on<event> 属性：

你可以直接将一个函数赋值给元素的 on<event> 属性（例如 onclick、onmouseover）。这种方法每种事件类型只能有一个处理程序；赋值一个新函数会覆盖之前的那个。

const anotherElement = document.getElementById('anotherElem');
anotherElement.onclick = function() {
  this.innerHTML = 'Clicked via onclick property!'; // 'this' 指的是 anotherElement
};

3. 内联 HTML 事件属性（不太推荐）：

事件处理程序可以直接在 HTML 属性中指定。这会将 JavaScript 逻辑与 HTML 结构混合在一起，对于大型应用程序通常不建议这样做，因为它会使代码更难维护。

<h1 onclick="this.innerHTML='Oops!'">Click on this text!</h1>

或者调用在别处定义的函数（该函数必须在全局作用域或可访问）：

<!DOCTYPE html>
<html>
<head>
  <title>Event Example</title>
  <script>
    function changeText(element) {
      element.innerHTML = "Text Changed!";
    }
  </script>
</head>
<body>
  <h1 onclick="changeText(this)">Click me!</h1>
</body>
</html>

事件处理程序中的 this 关键字

在使用 element.addEventListener('event', function() { ... }) 或 element.on<event> = function() { ... } 附加的事件处理函数内部，this 关键字通常指向附加事件监听器的 HTML 元素（即 event.currentTarget）。

然而，如果你使用箭头函数 (() => { ... }) 作为处理程序，this 会保留其来自周围（词法）作用域的值，而不是元素本身。请注意这个区别。

const demoButton = document.getElementById('demoBtn');
if (demoButton) {
  // 使用常规函数，'this' 是按钮
  demoButton.addEventListener('click', function() {
    console.log(this.tagName); // 输出 'BUTTON'
    this.textContent = 'Clicked!';
  });

  // 使用箭头函数，'this' 依赖于外部作用域
  // （例如，如果在全局定义，是 'window'；如果在方法中，是外部对象）
  // demoButton.addEventListener('mouseover', () => {
  //   console.log(this); // 可能不是按钮元素
  //   demoButton.style.color = 'red'; // 直接使用元素变量更安全
  // });
}

常见的 DOM 事件

以下是一些常用的 DOM 事件：

load（在 window、图片、脚本等上）：

load 事件在资源及其依赖资源加载完成后触发。对于 window 对象，它在整个页面（HTML、CSS、图片、脚本）完全加载后触发。

DOMContentLoaded 事件（在 document 上）通常更适合用于页面初始化逻辑，因为它在 HTML 文档完全解析后立即触发，无需等待样式表、图片和子框架加载完成。

window.addEventListener('load', function() {
  console.log('Page fully loaded (including images, CSS).'); // 页面完全加载（包括图片、CSS）。
});

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM fully loaded and parsed. Safe to manipulate DOM.'); // DOM 完全加载和解析。可以安全地操作 DOM 了。
  // 示例：从 localStorage 检查保存的用户偏好设置
  // checkUserPreferences();
});

change（在 <input>、<select>、<textarea> 上）：

change 事件在用户提交元素的值时触发。对于文本输入，这通常意味着元素值修改后失去焦点时。对于选择框、复选框和单选按钮，它在选择更改后立即触发。

const mySelect = document.getElementById('mySelect');
if (mySelect) {
  mySelect.addEventListener('change', function() {
    console.log('Selected value: ' + this.value);
    // 根据选择更新 UI
  });
}

input（在 <input>、<textarea> 上）：

input 事件在 <input> 或 <textarea> 元素的值改变时同步触发。这对于在用户输入时提供实时反馈非常有用。

const nameInput = document.getElementById('nameField');
if (nameInput) {
  nameInput.addEventListener('input', function() {
    document.getElementById('livePreview').textContent = 'Hello, ' + this.value;
  });
}

鼠标事件：mouseover、mouseout、mousedown、mouseup、click

• mouseover：当鼠标指针进入元素或其子元素时触发。

• mouseout：当鼠标指针离开元素或其子元素时触发。

• mousedown：当鼠标按钮在元素上按下时触发。

• mouseup：当鼠标按钮在元素上释放时触发。

• click：在同一元素上发生 mousedown 和 mouseup 事件后触发。

键盘事件：keydown、keyup

• keydown：当按下键时触发。

• keyup：当释放键时触发。

焦点事件：focus、blur

• focus：当元素获得焦点时触发。

• blur：当元素失去焦点时触发。

多个鼠标事件的示例：

const interactiveDiv = document.getElementById('interactiveBox');
if (interactiveDiv) {
  interactiveDiv.addEventListener('mousedown', function() {
    this.style.backgroundColor = 'blue';
    this.textContent = 'Pressed!';
  });
  interactiveDiv.addEventListener('mouseup', function() {
    this.style.backgroundColor = 'lightblue';
    this.textContent = 'Released!';
  });
}

HTML DOM 事件对象参考

要获取所有 HTML DOM 事件及其属性的完整列表，请查阅 MDN Web Docs 上的事件参考。