JavaScript - DOM 事件

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

以下是一些 DOM 事件的示例

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

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

DOM 事件也称为文档对象模型事件。当任何事件发生时，它用于与 DOM 元素交互并从 JavaScript 中操作 DOM 元素。

让我们看看下面 DOM 事件的示例。

onclick 事件类型

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

示例

尝试以下示例。

<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>

ondblclick 事件类型

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

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

示例

<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>

onkeydown 事件类型

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

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

示例

<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>

onmouseenter 和 onmouseleave 事件

在下面的代码中，我们使用 'onmouseenter' 和 'onmouseleave' 事件处理程序在 <div> 元素上添加悬停效果。

当鼠标指针进入 <div> 元素时，它会调用 changeRed() 函数将文本颜色更改为红色，当鼠标指针离开 <div> 元素时，它会调用 changeBlack() 函数将文本颜色再次更改为黑色。

示例

<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 标准 DOM 事件

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

属性	值	描述
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	文档离线时触发
离线	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，并且查找操作已结束时触发
onseeking	script	当媒体元素的 seeking 属性为 true，并且查找操作已开始时触发
onselect	script	当元素被选中时触发
onstalled	script	当获取媒体数据时发生错误时触发
onstorage	script	当文档加载时触发
onsubmit	script	当表单提交时触发
onsuspend	script	当浏览器已获取媒体数据，但在获取整个媒体文件之前停止时触发
ontimeupdate	script	当媒体更改其播放位置时触发
onundo	script	当文档执行撤消操作时触发
onunload	script	当用户离开文档时触发
onvolumechange	script	当媒体更改音量时触发，包括将音量设置为“静音”时
onwaiting	script	当媒体已停止播放，但预计将恢复时触发

打印页面