HTML | DOM 目标事件属性

HTML DOM（文档对象模型）是 HTML 与 JavaScript 之间的接口。它表示了网页文档的树型结构，并且可以通过 JavaScript 来修改其中的元素、属性以及文本内容等。事件（event）与 DOM 结合起来，这种结合可以让我们编写出交互式的网页。本文将介绍 HTML DOM 目标事件属性，这些属性可以用来监控特定元素上的事件。

事件的分类

首先，我们需要了解事件的种类。在 HTML DOM 中，事件分为以下几类：

• UI 事件：当用户与页面上的元素交互时触发。
• 焦点事件：当元素获得或失去焦点时触发。
• 鼠标事件：当用户通过鼠标与元素交互时触发。
• 滚动事件：当用户滚动带有滚动条的元素时触发。
• 键盘事件：当用户通过键盘与元素交互时触发。
• 合成事件：当用户使用输入法编辑器输入时触发。
• 变动事件：当底层 DOM 结构发生变化时触发。
• 变化事件：当元素的内容发生变化时触发。
• 传感事件：当设备的传感器发生变化时触发。

目标事件属性

根据事件的种类，我们可以在任何一个 HTML 元素上监听相应的事件。例如，我们可以在一个按钮元素上监听点击事件（click event），或者在一个输入框元素上监听键盘敲击事件（keydown event）。为了监听事件，我们需要使用一个名为“目标事件属性”的 DOM 属性。

HTML DOM 目标事件属性允许我们注册在 DOM 中的某个具体的元素上的事件监听器，并允许我们指定将要在事件发生时调用的函数。目标事件属性是一个具有相应名称的 JavaScript 函数，这些函数被称为事件处理程序（event handler）或事件监听器（event listener）。 JavaScript 代码可以通过访问事件处理程序来自定义元素的行为。

目标事件属性通常采用“on＋事件名”的形式命名，例如，onclick、onkeydown 等等。下面是一些常见的 HTML DOM 目标事件属性：

• onclick：在元素被点击时触发事件。
• ondblclick：在鼠标双击一个元素时触发事件。
• onmousedown：在鼠标按下某个键时触发事件。
• onmouseup：在鼠标释放某个键时触发事件。
• onmouseover：在鼠标移动至元素上方时触发事件。
• onmouseout：在鼠标移出某个元素时触发事件。
• onmousemove：在鼠标移动某个元素时触发事件。
• onkeydown：在用户敲击键盘上的任意键时触发事件。
• onkeypress：在用户按下键盘上的任意键时触发事件。
• onkeyup：在用户释放键盘上的任意键时触发事件。

代码示例：

<button onclick="alert('Hello world!')">点击我</button>

在上述示例中，我们在一个按钮元素上注册了一个 onclick 事件处理程序，这个处理程序是一个匿名函数，用于显示一个弹窗。

通常情况下，我们会通过 JavaScript 代码来注册事件处理程序。例如，我们可以使用下面的代码来注册一个最简单的事件处理程序：

document.getElementById("myButton").onclick = function() {
  alert("Hello world!");
};

其中，我们使用 document.getElementById() 函数来获取 id 为"myButton"的元素，然后给这个元素注册一个 onclick 事件处理程序。在这个处理程序函数中，我们使用 alert() 函数来显示一个弹窗。

需要注意的是，在使用目标事件属性注册事件处理程序时，我们只需要使用事件的名称，而不需要使用 on 前缀。例如，正确的语法应该是element.onclick = functionName，而不是element.onchange = functionName。