JavaScript Event学习第三章早期的事件处理程序

2023年5月27日下午11:42 • JavaScript

下面是JavaScript Event学习第三章早期的事件处理程序的完整攻略：

1. 什么是早期的事件处理程序

在早期的浏览器中，事件处理程序是通过在HTML标签中添加属性来实现的。例如，要在一个按钮上添加一个点击事件的处理程序，可以写成如下的HTML代码：

<button onclick="handleButtonClick()">Click Me</button>

这段代码中，onclick是按钮标签的一个属性，这个属性值是一个JavaScript函数的调用，在这里是handleButtonClick()。

早期事件处理程序的缺点是它们具有高度耦合，表现在就是HTML代码和JavaScript代码是紧密耦合的。这使得代码难以维护和重用。

2. 事件处理程序的缺陷

虽然早期事件处理程序可以工作，但它们具有一些缺陷：

HTML和JavaScript代码耦合过紧。
同一个事件处理程序只能在同一个元素上指定一次，无法实现多个不同的处理程序。
处理程序调用方式不够简洁，可读性差。

3. 早期事件处理程序的示例

下面给出一个早期事件处理程序的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>早期事件处理程序示例</title>
  <script>
    function handleButtonClick() {
      alert('Button clicked!');
    }
  </script>
</head>
<body>
  <button onclick="handleButtonClick()">Click Me</button>
</body>
</html>

这段代码添加了一个按钮，并在按钮标签中添加了一个 onclick 属性，调用了一个名为 handleButtonClick 的函数，这个函数又通过 alert() 方法显示一个消息框。

4. 早期事件处理程序的改进

为了解决早期事件处理程序的缺陷，我们可以使用更加灵活的事件处理程序。其中一种方式是使用DOM Level 0事件处理程序，这种方式是在JavaScript代码中指定事件处理程序。

以下是使用DOM Level 0事件处理程序的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>DOM Level 0事件处理程序示例</title>
</head>
<body>
  <button id="myButton">Click Me</button>
  <script>
    var button = document.getElementById('myButton');
    button.onclick = function() {
      alert('Button clicked!');
    };
  </script>
</body>
</html>

这段代码中，我们首先通过 document.getElementById() 方法获取到了按钮元素，并将它保存到一个变量中。然后，我们通过设置 onclick 属性，来指定事件处理程序。具体来说，我们将 onclick 属性设置为一个匿名函数，这个函数会在按钮被点击时调用。

相比于早期事件处理程序，DOM Level 0事件处理程序的优点是：