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> 部分中指定了样式。

我们在 <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()"> Change Div Color </button>
   <script>
      function handleClick(event) {
         var div = document.getElementById("test");
         div.style.backgroundColor = "blue";
      }
   </script>
</body>
</html>

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

在下面的代码中，我们在 <div> 元素中添加了"ommouseenter"事件处理程序。当用户将鼠标光标移到 <div> 元素中时，我们会调用 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"对象包含有关事件及其发生元素的信息。

事件对象还提供了各种属性和方法，可用于获取信息。

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