JavaScript - 事件入门

什么是事件？

JavaScript 与 HTML 的交互是通过事件来处理的，这些事件在用户或浏览器操作页面时发生。

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

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

事件是文档对象模型 (DOM) 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> Click the button to Change its text's color </h2>
   <button onclick = "this.style.color='red'"> Click Me </button>
   <div id = "output"> </div>
</body>
</html>

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

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

我们将“onclick”事件处理程序与 <button> 元素一起使用，当用户点击按钮时，它会调用 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()"> Change Div Color </button>
   <script>
      function handleClick(event) {
         var div = document.getElementById("test");
         div.style.backgroundColor = "blue";
      }
   </script>
</body>
</html>

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

在下面的代码中，我们在`

`元素中添加了'onmouseenter'事件处理程序。当用户将鼠标光标移入`

`元素时，我们将调用changeFontSize()和changeColor()函数。

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

这样，你就可以在一个特定的事件上调用多个函数。

<html>
<head>
   <style>
      #test {
         font-size: 15px;
      }
   </style>
</head>
<body>
   <h2> Hover over the below text to customize the font. </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'对象包含有关事件以及发生事件的元素的信息。

还有各种属性和方法可用于事件对象以获取信息。

对象	描述
Event	它是所有事件对象的父对象。

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

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

打印页面