Javascript 简明教程

JavaScript - DOM Events

DOM 事件是可以对 HTML 元素执行的操作。当事件发生时，它将触发 JavaScript 函数。然后可以使用此函数更改 HTML 元素或执行其他操作。

The DOM events are actions that can be performed on HTML elements. When an event occurs, it triggers a JavaScript function. This function can then be used to change the HTML element or perform other actions.

以下是一些 DOM 事件的示例：

Here are some examples of DOM events:

  1. Click − This event occurs when a user clicks on an HTML element.

  2. Load − This event occurs when an HTML element is loaded.

  3. Change − This event occurs when the value of an HTML element is changed.

  4. Submit − This event occurs when an HTML form is submitted.

可以使用事件处理程序或 addEventListener() 方法来侦听和响应 DOM 事件。addEventListener() 方法接受两个参数：事件的名称和事件发生时要调用的函数。

You can use the event handlers or addEventListener() method to listen to and react to the DOM events. The addEventListener() method takes two arguments: the name of the event and the function that you want to be called when the event occurs.

DOM 事件也称为文档对象模型事件。它用于与 DOM 元素交互并在事件发生时通过 JavaScript 操作 DOM 元素。

The DOM events are also referred as Document Object Model events. It is used to interact with the DOM elements and manipulate the DOM elements from JavaScript when any event occurs.

让我们来看一下 DOM 事件的以下示例。

Let’s look at the below examples of DOM events.

The onclick Event Type

这是用户单击其鼠标左键时发生的最常用事件类型。您可以针对此事件类型放置您的验证、警告等操作。

This is the most frequently used event type which occurs when a user clicks the left button of his mouse. You can put your validation, warning etc., against this event type.

Example

尝试以下示例。

Try the following example.

<html>
<head>
   <script>
	  function sayHello() {
		 alert("Hello World")
	  }
   </script>
</head>
<body>
   <p>Click the following button and see result</p>
   <form>
	  <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </form>
</body>
</html>

The ondblclick Event Type

我们在下面的代码中使用了 'ondblclick' 事件处理程序与元素。当用户双击按钮时，它调用 changeColor() 函数。

We use the 'ondblclick' event handler in the code below with the element. When users double click the button, it calls the changeColor() function.

在 changeColor() 函数中，我们更改了文本的颜色。因此，当用户双击按钮时，代码将更改文本的颜色。

In the changeColor() function, we change the color of the text. So, the code will change the text’s color when the user double-clicks the button.

Example

<html>
<body>
   <h2 id = "text"> Hi Users! </h2>
   <button ondblclick="changeColor()"> Double click me! </button>
   <script>
      function changeColor() {
         document.getElementById("text").style.color = "red";
     }
   </script>
</body>
</html>

The onkeydown Event Type

我们在下面的代码中使用了 <input> 元素的 'keydown' 事件。每当用户按任何键时，它都会调用 customizeInput() 函数。

We used the 'keydown' event in the code below with the <input> element. Whenever the user will press any key, it will call the customizeInput() function.

在 customizeInput() 函数中，我们更改输入和输入文本的背景颜色为红色。

In the customizeInput() function, we change the background color of the input and the input text to red.

Example

<html>
<body>
   <p> Enter charater/s by pressing any key  </p>
   <input type = "text" onkeydown = "customizeInput()">
   <script>
      function customizeInput() {
         var ele = document.getElementsByTagName("INPUT")[0];
         ele.style.backgroundColor = "yellow";
         ele.style.color = "red";
      }
   </script>
</body>

The onmouseenter and onmouseleave Events

在下面的代码中，我们使用“onmouseenter”和“onmouseleave”事件处理程序为＜div＞元素添加一个移入效果。

In the code below, we use the 'onmouseenter' and 'onmouseleave' event handlers to add a hover effect on the <div> element.

当鼠标指针进入＜div＞元素时，将调用changeRed()函数，将文本颜色更改为红色，当鼠标指针离开＜div＞元素时，将调用changeBlack()函数，将文本颜色重新更改为黑色。

When the mouse pointer enters the <div> element, it calls the changeRed() function to change the text color to red, and when the mouse pointer leaves the <div> element, it calls the changeBlack() function to change the text color to black again.

Example

<html>
<body>
   <div id = "text" style = "font-size: 20px;" onmouseenter = "changeRed()" onmouseleave = "changeBlack()"> Hover over the text. </div>
   <script>
      function changeRed() {
         document.getElementById("text").style.color = "red";
      }
      function changeBlack() {
         document.getElementById("text").style.color = "black";
      }
   </script>
</body>
</html>

HTML 5 Standard DOM Events

在此处列出标准的 HTML 5 事件以供您参考。此处脚本指示针对该事件执行的 Javascript 函数。

The standard HTML 5 events are listed here for your reference. Here script indicates a Javascript function to be executed against that event.

Attribute

Value

Description

Offline

script

Triggers when the document goes offline

Onabort

script

Triggers on an abort event

onafterprint

script

Triggers after the document is printed

onbeforeonload

script

Triggers before the document loads

onbeforeprint

script

Triggers before the document is printed

onblur

script

Triggers when the window loses focus

oncanplay

script

Triggers when media can start play, but might has to stop for buffering

oncanplaythrough

script

Triggers when media can be played to the end, without stopping for buffering

onchange

script

Triggers when an element changes

onclick

script

Triggers on a mouse click

oncontextmenu

script

Triggers when a context menu is triggered

ondblclick

script

Triggers on a mouse double-click

ondrag

script

Triggers when an element is dragged

ondragend

script

Triggers at the end of a drag operation

ondragenter

script

Triggers when an element has been dragged to a valid drop target

ondragleave

script

Triggers when an element is being dragged over a valid drop target

ondragover

script

Triggers at the start of a drag operation

ondragstart

script

Triggers at the start of a drag operation

ondrop

script

Triggers when dragged element is being dropped

ondurationchange

script

Triggers when the length of the media is changed

onemptied

script

Triggers when a media resource element suddenly becomes empty.

onended

script

Triggers when media has reach the end

onerror

script

Triggers when an error occur

onfocus

script

Triggers when the window gets focus

onformchange

script

Triggers when a form changes

onforminput

script

Triggers when a form gets user input

onhaschange

script

Triggers when the document has change

oninput

script

Triggers when an element gets user input

oninvalid

script

Triggers when an element is invalid

onkeydown

script

Triggers when a key is pressed

onkeypress

script

Triggers when a key is pressed and released

onkeyup

script

Triggers when a key is released

onload

script

Triggers when the document loads

onloadeddata

script

Triggers when media data is loaded

onloadedmetadata

script

Triggers when the duration and other media data of a media element is loaded

onloadstart

script

Triggers when the browser starts to load the media data

onmessage

script

Triggers when the message is triggered

onmousedown

script

Triggers when a mouse button is pressed

onmousemove

script

Triggers when the mouse pointer moves

onmouseout

script

Triggers when the mouse pointer moves out of an element

onmouseover

script

Triggers when the mouse pointer moves over an element

onmouseup

script

Triggers when a mouse button is released

onmousewheel

script

Triggers when the mouse wheel is being rotated

onoffline

script

Triggers when the document goes offline

onoine

script

Triggers when the document comes online

ononline

script

Triggers when the document comes online

onpagehide

script

Triggers when the window is hidden

onpageshow

script

Triggers when the window becomes visible

onpause

script

Triggers when media data is paused

onplay

script

Triggers when media data is going to start playing

onplaying

script

Triggers when media data has start playing

onpopstate

script

Triggers when the window’s history changes

onprogress

script

Triggers when the browser is fetching the media data

onratechange

script

Triggers when the media data’s playing rate has changed

onreadystatechange

script

Triggers when the ready-state changes

onredo

script

Triggers when the document performs a redo

onresize

script

Triggers when the window is resized

onscroll

script

Triggers when an element’s scrollbar is being scrolled

onseeked

script

Triggers when a media element’s seeking attribute is no longer true, and the seeking has ended

onseeking

script

Triggers when a media element’s seeking attribute is true, and the seeking has begun

onselect

script

Triggers when an element is selected

onstalled

script

Triggers when there is an error in fetching media data

onstorage

script

Triggers when a document loads

onsubmit

script

Triggers when a form is submitted

onsuspend

script

Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched

ontimeupdate

script

Triggers when media changes its playing position

onundo

script

Triggers when a document performs an undo

onunload

script

Triggers when the user leaves the document

onvolumechange

script

Triggers when media changes the volume, also when volume is set to "mute"

onwaiting

script

Triggers when media has stopped playing, but is expected to resume