JS学习笔记之事件处理模型

简介

在 Web 开发中，事件处理是一个非常重要的部分。事件处理模型就是规定了当事件发生时可以采取哪些行动。JavaScript 作为 Web 开发中最常用的语言，其事件处理模型主要分为三种：内联模型、传统模型和 DOM2 级模型。本篇文章将会详细讲解这三种事件处理模型的原理及其优缺点，以及如何使用它们。

内联模型

内联模型就是将 JavaScript 代码嵌入到 HTML 标签中，直接通过标签的属性来绑定事件处理程序的方法。

使用内联模型的代码示例：

<button onclick="alert('Hello World!')">Click Me</button>

这里的 onclick 是 HTML 标签中的属性，在按钮被点击时，它上面绑定的 JavaScript 代码将被执行，从而弹出一个包含 "Hello World!" 的警告框。

内联模型的优点是简单、容易理解和快捷。然而，在实际应用中，该模型存在一些缺点。

缺点：

非可维护性好。当内联模型用于多个元素时，代码重复率高，难以维护。如果需要修改事件处理程序，就必须遍历 HTML 页面中所有的标签。
紧密耦合。此模型的代码主要集中在 HTML 页面中，所以当需要更改 JavaScript 代码时，HTML 页面也必须进行相应更改，使得代码非常紧密耦合。

传统模型

传统模型主要是直接在 JavaScript 代码中通过事件菜单来绑定事件。

使用传统模型的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <button id="myButton">Click Me</button>
    <script type="text/javascript">
        var myButton = document.getElementById("myButton");
        myButton.onclick = function() {
            alert("Hello World!");
        };
    </script>
</body>
</html>

这里是定义了一个表示按钮的变量 myButton，通过该变量获取到了 HTML 页面中按钮元素的引用。然后，通过将 onclick 属性设置为一个匿名函数，达到了绑定事件处理函数的目的。

传统模型的优点是比内联模型更加可维护和易于管理。但是，使用该模型也存在一些缺点。

缺点：

不能同时添加多个事件处理程序。在传统模型中，只能通过将全部代码都写在 onclick 匿名函数中来添加多个事件处理程序，而这可能会造成代码混乱和难以管理。
容易被覆盖。如果在之后定义了一个新的 onclick 函数，它依然会覆盖之前的 onclick 函数，这可能会产生不必要的麻烦。

DOM2 级模型

DOM2 级模型是目前 Web 开发中使用最广泛的一种事件处理模型。

使用 DOM2 级模型的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <button id="myButton">Click Me</button>
    <script type="text/javascript">
        var myButton = document.getElementById("myButton");
        myButton.addEventListener("click", function() {
            alert("Hello World!");
        }, false);
    </script>
</body>
</html>

这里的代码基本与传统模型的代码相似，唯一不同的是事件处理程序的定义方式。该模型通过 addEventListener() 方法将事件处理函数附加到特定的事件上。

DOM2 级模型的优点：