JavaScript 事件 - 绿叶网

JavaScript 事件是什么？

在之前的学习中，我们接触过鼠标点击事件（即 onclick）。那事件究竟是什么呢？举个例子，当我们点击一个按钮时，会弹出一个对话框。其中 “点击” 就是一个事件，“弹出对话框” 就是我们在点击这个事件里面做的一些事情。

在 JavaScript 中，一个事件应该有 3 部分。

事件主角：是按钮呢？还是 div 元素呢？还是其他？
事件类型：是点击呢？还是移动呢？还是其他？
事件过程：这个事件都发生了些什么？

当然还有目睹整个事件的吃瓜群众，也就是用户。像点击事件，也需要用户点了按钮才会发生嘛，没人点就不会发生。很好理解吧？一个 “事件” 就这样诞生了。

在 JavaScript 中，事件一般是用户对页面的一些 “小动作” 引起的，例如按下鼠标、移动鼠标等，这些都会触发相应的一个事件。JavaScript 常见的事件共有以下 4 种。

鼠标事件。
键盘事件。
表单事件。
页面事件。

事件操作是 JavaScript 的核心之一，可以这样说：“不懂事件操作，JavaScript 等于白学”。

如何处理 JavaScript 事件？

要让 JavaScript 响应某个事件，我们需要为该事件附加一个 “事件处理程序”（Event Handler）。事件处理程序是一段 JavaScript 代码（通常是一个函数），当事件发生时，这段代码就会被执行。

语法：

obj.onevent = function() {
    ……
};

说明：

obj 是一个 DOM 对象。onevent 是事件属性名，例如 onclick、onmouseover 等。然后将一个函数赋值给这个属性，这个函数就是事件发生时要执行的处理程序。

示例：一个简单的 JavaScript 事件

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="btn">欢迎</button>
    <script>
        const oBtn = document.getElementById("btn");

        oBtn.onclick = function() {
            alert("欢迎来到绿叶网！");
        };
    </script>
</body>
</html>

当我们点击【欢迎】按钮后，会弹出一个对话框，如下图所示。

JavaScript 事件示例

分析：

在这个例子中，我们首先使用 document.getElementById("btn") 来获取 id 为 "btn" 的元素，然后将一个匿名函数赋值给 oBtn 的 onclick 属性。当按钮被点击时，这个函数就会执行。

不过这种通过将匿名函数赋值给事件属性的方式，一个事件属性只能附加一个处理程序，后附加的处理程序会覆盖前面的。为了解决 “事件覆盖” 的问题，并实现更高级的事件监听，JavaScript 提供了 addEventListener() 方法。这也是现代开发中最推荐的方式，我们在下一节中会详细介绍。