47、JavaScript 事件处理与文档操作全解析

JavaScript 事件处理与文档操作全解析

1. JavaScript 事件处理基础

1.1 事件处理程序返回值

在现代 JavaScript 中，事件处理程序通常不应该返回任何值。不过，在旧代码里可能会看到有返回值的事件处理程序，其返回值一般是向浏览器发出的信号，告知它不要执行与该事件关联的默认操作。例如，表单中提交按钮的 onclick 处理程序返回 false 时，浏览器就不会提交表单，这通常是因为事件处理程序判定用户输入未通过客户端验证。

而阻止浏览器执行默认操作的标准且推荐的方法是调用事件对象的 preventDefault() 方法。

1.2 事件处理程序的调用顺序

一个事件目标可能为特定类型的事件注册了多个事件处理程序。当该类型的事件发生时，浏览器会按照注册的顺序调用所有处理程序。有趣的是，即使将使用 addEventListener() 注册的事件处理程序与通过对象属性（如 onclick ）注册的事件处理程序混合使用，这个顺序规则仍然适用。

1.3 事件传播

1.3.1 事件冒泡

当事件目标是 Window 对象或其他独立对象时，浏览器只需在该对象上调用相应的处理程序来响应事件。但当事件目标是 Document 或文档元素时，情况就复杂多了。

在目标元素上注册的事件处理程序被调用后，大多数事件会在 DOM 树中“冒泡”