Javascript 简明教程

JavaScript -Introduction to Events

What is an Event ?

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

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

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

事件是文档对象模型 (DOM) 级别 3 的一部分，每个 HTML 元素都包含一组可以触发 JavaScript 代码的事件。

请仔细阅读本小型教程以更深入地了解 HTML Event Reference 。

JavaScript Event Handlers

事件处理程序可用作 HTML 元素的属性。它将内联 JavaScript 或函数执行代码作为值。

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

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

Syntax

用户可以遵循以下语法将事件处理程序与 HTML 元素一起使用。

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

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

Example: Inline JavaScript with Event Handlers

在以下代码中，我们创建了 <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>

Example: Function with Event Handlers

在以下代码中，我们创建了 <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>

Example: Multiple Functions with Event Handlers

在下面的代码中，我们在 <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 Object

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

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

Object

Description

Event

它是所有事件对象的父级。

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

Object/Type

Handles

AnimationEvent

它处理 CSS 动画。

ClipboardEvent

它处理剪贴板的更改。

DragEvent

它处理拖放事件。

FocusEvent

处理焦点事件。

HashChangeEvent

它处理 URL 中锚定部分的更改。

InputEvent

处理表单输入。

KeyboardEvent

处理用户键盘交互。

MediaEvent

它处理与媒体相关的事件。

MouseEvent

处理用户鼠标交互。

PageTransitionEvent

处理网页间的导航。

PopStateEvent

它会处理页面历史记录中的更改。

ProgressEvent

为了处理文件加载进度。

StorageEvent

为了处理 Web 存储中的更改。

TouchEvent

为了处理设备屏幕上的触摸交互。

TransitionEvent

To handle CSS transition.

UiEvent

为了处理用户对用户界面的交互。

WheelEvent

为了处理用户鼠标滚轮的交互。