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 事件，供您参考。此处 script 指示要针对该事件执行的 Javascript 函数。

属性 值 描述
Offline script 在文档脱机时触发
Onabort script 在 abort 事件上触发
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 在 ready-state 更改时触发
onredo script 在文档执行重做时触发
onresize script 在调整窗口大小时触发
onscroll script 在滚动元素的滚动条时触发
onseeked script 当媒体元素的 seeking 属性不再为 true，并且 seek 已结束时触发
onseeking script 当媒体元素的 seeking 属性为 true 且搜索已开始时触发
onselect script 在选择元素时触发
onstalled script 在获取媒体数据时出错时触发
onstorage script 在文档加载时触发
onsubmit script 提交表单时触发
onsuspend script 当浏览器一直在获取媒体数据，但在获取整个媒体文件之前停止时触发
ontimeupdate script 当媒体更改其播放位置时触发
onundo script 在文档执行撤消时触发
onunload script 在用户离开文档时触发
onvolumechange script 当媒体更改音量时触发，当音量设置为 “mute” 时也触发
onwaiting script 当媒体已停止播放，但预期会恢复时触发
打印本页
上一页
下一页