JavaScript 事件

JavaScript 与 HTML 的交互是通过当用户或浏览器操纵页面时发生的事件来处理的。

当页面加载时，这被称为一个事件。当用户点击一个按钮，这一点击也是一个事件。其他的例子包括按任意键、关闭窗口、调整窗口大小等事件。

开发者可以使用这些事件来执行 JavaScript 编写的响应，这些响应会导致按钮关闭窗口、向用户显示消息、验证数据，以及几乎任何可以想象到的其他类型的响应。

事件是 DOM（文档对象模型）Level 3 的一部分，并且每一个 HTML 元素都包含一组可以触发 JavaScript 代码的事件。

请通过这个简短的教程更好地理解 HTML 事件引用。

JavaScript 事件处理器

事件处理器可以作为 HTML 元素的属性使用。它接受内联 JavaScript 或者函数执行代码作为值。

每当有任何事件触发时，它就会调用内联 JavaScript 代码或执行回调函数来完成特定的动作。

简单来说，它是用来处理事件的。

语法

用户可以遵循以下语法来使用带有 HTML 元素的事件处理器。

<div eventHandler = "JavaScript_code"> </div>

在上述语法中，你需要将 eventHandler 替换为实际的事件处理器如 onclick、onmouseover 等。JavaScript_code 应该执行函数或运行内联 JavaScript。

示例：带有事件处理器的内联 JavaScript

在下面的代码中，我们创建了一个 <button> 元素。同时，我们使用了 onclick 事件处理器来捕获按钮上的点击事件。

我们编写了处理事件的内联 JavaScript 代码。在内联 JavaScript 代码中，this 关键字代表 <button> 元素，并且我们将按钮的文字颜色改为红色。

<html>
<body>
   <h2> 点击按钮以改变其文字的颜色 </h2>
   <button onclick = "this.style.color='red'"> 点击我 </button>
   <div id = "output"> </div>
</body>
</html>

示例：带有事件处理器的函数

在下面的代码中，我们创建了一个 <div> 元素并在 <head> 部分添加了样式。

我们在 <button> 元素上使用了 onclick 事件处理器，当用户点击按钮时调用 handleClick() 函数。

handleClick() 函数接受 event 对象作为参数。在 handleClick() 函数中，我们使用 JavaScript 改变 <div> 元素的背景色。

<html>
<head>
   <style>
      #test {
         width: 600px;
         height: 100px;
         background-color: red;
      }
   </style>
</head>
<body>
   <div id = "test"> </div> <br>
   <button onclick = "handleClick()"> 改变 Div 颜色 </button>
   <script>
      function handleClick(event) {
         var div = document.getElementById("test");
         div.style.backgroundColor = "blue";
      }
   </script>
</body>
</html>

示例：带有多个函数的事件处理器

在下面的代码中，我们在 <div> 元素上添加了 onmouseenter 事件处理器。当用户将鼠标光标移入 <div> 元素时，我们调用 changeFontSize() 和 changeColor() 函数。

changeFontSize() 函数改变文本的大小，而 changeColor() 函数改变文本的颜色。

这样，你可以在特定事件上触发多个函数。

<html>
<head>
   <style>
      #test {
         font-size: 15px;
      }
   </style>
</head>
<body>
   <h2> 将鼠标悬停在下方文本上以自定义字体 </h2>
   <div id = "test" onmouseenter = "changeFontSize(); changeColor();"> Hello World! </div> <br>
   <script>
      function changeFontSize(event) {
         document.getElementById("test").style.fontSize = "25px";
      }
      function changeColor(event) {
         document.getElementById("test").style.color = "red";
      }
   </script>
</body>
</html>

JavaScript 事件对象

处理事件的函数将 event 对象作为参数。event 对象包含了关于事件及其所发生的元素的信息。

还有各种各样的属性和方法可以与事件对象一起使用以获取信息。

对象描述

对象/类型	处理
`AnimationEvent`	处理 CSS 动画。
`ClipboardEvent`	处理剪贴板的变化。
`DragEvent`	处理拖放事件。
`FocusEvent`	处理焦点事件。
`HashChangeEvent`	处理 URL 中锚点部分的变化。
`InputEvent`	处理表单输入。
`KeyboardEvent`	处理用户的键盘交互。
`MediaEvent`	处理媒体相关的事件。
`MouseEvent`	处理用户的鼠标交互。
`PageTransitionEvent`	处理网页之间的导航。
`PopStateEvent`	处理页面历史的变化。
`ProgressEvent`	处理文件加载的进度。
`StorageEvent`	处理网络存储的变化。
`TouchEvent`	处理设备屏幕上触摸交互。
`TransitionEvent`	处理 CSS 转场。
`UiEvent`	处理用户的界面交互。
`WheelEvent`	处理用户的鼠标滚轮交互。

以上列表中列出了不同类型的事件对象。每个事件对象包含各种事件、方法和属性。