7、JavaScript 事件处理全解析

JavaScript 事件处理全解析

1. 事件监听器基础

在网页交互中，事件监听器是实现用户与页面互动的关键。传统的编程方式可能会采用不断检查事件是否发生的阻塞式方法，就像不断查看邮箱是否收到重要邮件一样，会干扰程序的正常运行。而 JavaScript 采用的是非阻塞式方法，通过事件监听器来监听事件的发生，当事件触发时，调用相应的回调函数。

1.1 事件监听器的工作原理

事件监听器就像是设置了一个通知，当特定事件发生时会发出提醒。例如，当用户点击页面时，我们可以使用以下代码添加事件监听器：

document.body.addEventListener("click", doSomething);

在这个例子中，事件监听器被添加到文档的 body 元素上，当页面的任何部分被点击时， doSomething 函数将被调用。在事件发生之前，程序可以继续执行其他任务。

1.2 不同类型的事件处理方法

1.2.1 内联事件处理程序

内联事件处理程序是将事件处理代码直接写在 HTML 标记中的方法。例如：

<p onclick="console.log('You Clicked Me!')">Click Me</p>

虽然这种方法在现代浏览器中仍然有效，但不建议使用，原因如下：
- JavaScript 代码与 HT