Javascript 简明教程

JavaScript - DOM Events

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

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

Click - 当用户单击 HTML 元素时发生此事件。
Load - 当加载 HTML 元素时发生此事件。
Change - 当更改 HTML 元素的值时发生此事件。
Submit - 当提交 HTML 表单时发生此事件。

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

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

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

The onclick Event Type

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

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

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

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

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

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＞元素添加一个移入效果。

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

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

Attribute

Value

Description

Offline

script

当文档脱机时触发

Onabort

script

在中止事件上触发

onafterprint

script

在文档打印后触发

onbeforeonload

script

在文档加载之前触发

onbeforeprint

script

在文档打印之前触发

onblur

script

当窗口失去焦点时触发

oncanplay

script

当媒体可以开始播放，但可能由于缓冲而停止时触发

oncanplaythrough

script

当媒体可以一直播放到结尾，而不用因为缓冲而停止时触发

onchange

script

当元素发生变化时触发

onclick

script

在鼠标单击上触发

oncontextmenu

script

当触发上下文菜单时触发

ondblclick

script

在鼠标双击上触发

ondrag

script

当元素被拖动时触发

ondragend

script

在拖动操作结束时触发

ondragenter

script

当元素已经拖动到有效的放置目标时触发

ondragleave

script

当元素被拖动到有效的放置目标上时触发

ondragover

script

在拖动操作开始时触发

ondragstart

script

在拖动操作开始时触发

ondrop

script

当被拖动的元素被放置时触发

ondurationchange

script

当媒体长度发生变化时触发

onemptied

script

当媒体资源元素突然变为空时触发。

onended

script

当媒体到达末尾时触发。

onerror

script

当发生错误时触发。

onfocus

script

当窗口获得焦点时触发。

onformchange

script

当表单更改时触发。

onforminput

script

当表单获得用户输入时触发。

onhaschange

script

当文档已更改时触发。

oninput

script

当元素获得用户输入时触发。

oninvalid

script

当元素无效时触发。

onkeydown

script

当按下某个键时触发。

onkeypress

script

当按下并释放某个键时触发。

onkeyup

script

当释放某个键时触发。

onload

script

当文档加载时触发。

onloadeddata

script

当媒体数据加载时触发。

onloadedmetadata

script

当媒体元素的持续时间和其他媒体数据加载时触发。

onloadstart

script

当浏览器开始加载媒体数据时触发。

onmessage

script

当触发消息时触发。

onmousedown

script

当按下鼠标按钮时触发。

onmousemove

script

当鼠标指针移动时触发。

onmouseout

script

当鼠标指针移出元素时触发

onmouseover

script

当鼠标指针移入元素时触发

onmouseup

script

当释放鼠标按钮时触发

onmousewheel

script

当旋转鼠标滚轮时触发

onoffline

script

当文档脱机时触发

onoine

script

当文档联机时触发

ononline

script

当文档联机时触发

onpagehide

script

当窗口隐藏时触发

onpageshow

script

当窗口可见时触发

onpause

script

当暂停媒体数据时触发

onplay

script

当媒体数据开始播放时触发

onplaying

script

当媒体数据开始播放时触发

onpopstate

script

当窗口的历史记录发生变化时触发

onprogress

script

当浏览器正在获取媒体数据时触发

onratechange

script

当媒体数据的播放速度发生变化时触发

onreadystatechange

script

当就绪状态发生变化时触发

onredo

script

当文档执行重做操作时触发

onresize

script

当窗口调整大小时触发

onscroll

script

当滚动元素的滚动条时触发

onseeked

script

当媒体元素的 seeking 属性不再为 true 且 seeking 已经结束时触发

onseeking

script

当媒体元素的 seeking 属性为 true 且 seeking 已经开始时触发

onselect

script

在元素被选择时触发

onstalled

script

在获取媒体数据时出错时触发

onstorage

script

当文件加载时触发

onsubmit

script

在表单提交时触发

onsuspend

script

当浏览器正在获取媒体数据但没有获取到整个媒体文件时触发

ontimeupdate

script

当媒体改变播放位置时触发

onundo

script

当文档执行撤消操作时触发

onunload

script

当用户离开文档时触发

onvolumechange

script

当媒体改变音量时触发，包括设置“静音”

onwaiting

script

当媒体停止播放但预计会继续时触发