Javascript 简明教程

JavaScript -Introduction to Events

What is an Event ?

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

JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

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

When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.

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

Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable.

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

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events which can trigger JavaScript Code.

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

Please go through this small tutorial for a better understanding HTML Event Reference.

JavaScript Event Handlers

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

Event handler can be used as an attribute of the HTML element. It takes the inline JavaScript or function execution code as a value.

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

Whenever any event triggers, it invokes the inline JavaScript code or executes the callback function to perform the particular action.

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

In simple terms, it is used to handle the events.

Syntax

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

Users can follow the syntax below to use event handlers with HTML elements.

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

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

In the above syntax, you need to replace the 'eventHandler' with the actual event handler like 'onclick', 'onmouseover', etc. The 'JavaScript_code' should execute the function or run JavaScript inline.

Example: Inline JavaScript with Event Handlers

在以下代码中，我们创建了 <button> 元素。此外，我们使用“onclick”事件处理程序来捕获按钮上的点击事件。

In the code below, we have created the <button> element. Also, we have used the 'onclick' event handler to capture the click event on the button.

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

We have written the inline JavaScript code to handle the event. In the inline JavaScript code, the 'this' keyword represents the <button> element, and we change the button’s text color to red.

<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> 部分中提供了样式。

In the code below, we have created the <div> element and given style into the <head> section.

我们在 <button> 元素中使用了 'onclick' 事件处理程序，当用户单击按钮时该处理程序会调用 handleClick() 函数。

We used the 'onclick' event handler with the <button> element, which calls the handleClick() function when the user clicks the button.

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

The handleClick() function takes the 'event' object as a parameter. In the handleClick() function, we change the background color of the <div> element using JavaScript.

<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() 函数。

In the code below, we have added the 'ommouseenter' event handler with the <div> element. We call the changeFontSize() and changeColor() functions when a user enters the mouse cursor in the <div> element.

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

The changeFontSize() function changes the size of the text, and changeColor() function changes the color of the text.

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

This way, you can invoke the multiple functions on the particular event.

<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' 对象包含关于事件以及事件发生元素的信息。

The function that handles the event takes the 'event' object as a parameter. The 'event' object contains the information about the event and the element on which it occurred.

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

There are various properties and methods are also available which can be used with the event object to get information.

Object

Description

Event

It is a parent of all event objects.

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

Here is the list of different types of event objects. Each event object contains various events, methods, and properties.

Object/Type

Handles

AnimationEvent

It handles the CSS animations.

ClipboardEvent

It handles the changes of the clipboard.

DragEvent

It handles the drag-and-drop events.

FocusEvent

To handle the focus events.

HashChangeEvent

It handles the changes in the anchor part of the URL.

InputEvent

To handle the form inputs.

KeyboardEvent

To handle the keyboard interaction by users.

MediaEvent

It handles the media-related events.

MouseEvent

To handle the mouse interaction by users.

PageTransitionEvent

To handle the navigation between web pages.

PopStateEvent

It handles the changes in the page history.

ProgressEvent

To handle the progress of the file loading.

StorageEvent

To handle changes in the web storage.

TouchEvent

To handle touch interaction on the device’s screen.

TransitionEvent

To handle CSS transition.

UiEvent

To handle the user interface interaction by users.

WheelEvent

To handle the mouse-wheel interaction by users.