timeStamp 是事件对象的一个属性，用于表示事件被触发的时间戳。时间戳是一个数字，表示自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数。在 JavaScript 和 HTML DOM 中，事件对象的 timeStamp 属性可以用于测量事件发生的时间，以便进行性能分析或其他时间相关的操作。以下是一个简单的例子，演示了 timeStamp 的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>timeStamp Example</title></head><body> <button id="myButton&...
在 JavaScript 和 HTML DOM 中，键盘事件（如keydown、keyup）的事件对象通常包含一个名为 key 的属性，该属性表示与事件关联的按键。key 属性返回一个表示按下的键的字符串，通常是一个可视字符（如字母或数字），或者是一个描述按下的非字符键的字符串（如 "Enter" 或 "ArrowUp"）。以下是一个简单的例子，演示了 key 的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>key Example</title></head><body> <input type="tex...
currentTarget 是事件对象的属性，用于引用事件当前正在处理的元素，即事件绑定的目标元素。在 JavaScript 和 HTML DOM 中，事件通过事件冒泡或事件捕获的方式传播。当事件触发时，它经过一系列的 DOM 元素，currentTarget 始终指向事件处理程序当前正在处理的元素，而 target 属性则指向触发事件的元素。下面是一个简单的例子，演示了 currentTarget 的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>currentTarget Example</title></head><body> <div id=&qu...
cancelable 是事件对象的一个布尔属性，用于指示该事件是否可以被取消。如果 cancelable 为 true，则表示事件可以被取消；如果为 false，则表示事件不可取消。这个属性通常在调用事件的 preventDefault() 方法时使用，通过调用这个方法，可以阻止事件的默认行为。只有在 cancelable 为 true 的情况下，才能调用 preventDefault()。以下是一个简单的例子，演示了 cancelable 的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cancelable Example</title></head><body&g...
shiftKey 是事件对象的一个布尔属性，用于指示在触发事件时是否按下了 Shift 键。这个属性通常在处理键盘事件（如keydown、keyup）时使用。以下是一个简单的例子，演示了 shiftKey 的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>shiftKey Example</title></head><body> <div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"> Press ...
ctrlKey 是事件对象的一个布尔属性，用于指示在触发事件时是否按下了 Ctrl 键。这个属性通常在处理键盘事件（如keydown、keyup）时使用。以下是一个简单的例子，演示了 ctrlKey 的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ctrlKey Example</title></head><body> <textarea id="myTextarea" rows="4" cols="50">Press and hold the Ctrl key while clickin...
bubbles 是事件对象的一个布尔属性，用于指示事件是否冒泡。冒泡是指事件在DOM树中向上传播的过程，从目标元素一直传递到根元素。在事件处理中，事件首先被触发在目标元素上，然后逐级向上冒泡到根元素。如果 bubbles 为 true，则事件会冒泡，否则不会。以下是一个简单的示例，演示了 bubbles 的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bubbles Example</title></head><body> <div id="outer"> <div id="inner">C...
clientY 是一个表示鼠标事件中的 Y 坐标位置的事件属性，它是相对于浏览器窗口（或框架）的客户端区域的垂直坐标。在JavaScript和HTML DOM中，当处理鼠标事件（如mousemove、mousedown、mouseup等）时，可以通过 event.clientY 获取鼠标指针相对于浏览器窗口左上角的垂直坐标。下面是一个简单的示例，演示如何使用 clientY：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clientY Example</title> <style> body { height: 100vh; margin: 0; ...
screenX 是一个表示鼠标事件中的 X 坐标位置的事件属性，它是相对于用户屏幕左上角的水平坐标。在JavaScript和HTML DOM中，当处理鼠标事件（如mousemove、mousedown、mouseup等）时，可以通过 event.screenX 获取鼠标指针相对于用户屏幕左上角的水平坐标。下面是一个简单的示例，演示如何使用 screenX：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>screenX Example</title> <style> body { height: 100vh; margin: 0; display...
clientX 是一个表示鼠标事件中的 X 坐标位置的事件属性，它是相对于浏览器窗口（或框架）的客户端区域的水平坐标。在JavaScript和HTML DOM中，当处理鼠标事件（如mousemove、mousedown、mouseup等）时，可以通过 event.clientX 获取鼠标指针相对于浏览器窗口左上角的水平坐标。下面是一个简单的示例，演示如何使用 clientX：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clientX Example</title> <style> body { height: 100vh; margin: 0; ...
在JavaScript和HTML DOM中，relatedTarget 是一个事件属性，通常与鼠标事件相关。它表示事件相关的另一个对象（通常是相关的元素），具体取决于事件类型。在鼠标事件中，relatedTarget 通常用于指定与事件相关的元素。例如，在 mouseout 事件中，relatedTarget 表示鼠标离开的目标元素。而在 mouseover 事件中，它表示鼠标进入的目标元素。以下是一个简单的示例，演示了 relatedTarget 在 mouseout 事件中的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>relatedTarget Example</title> ...
onoffline 事件是 HTML DOM 中用于处理网络连接状态变为离线（offline）时触发的事件。当浏览器检测到网络连接不可用时，会触发这个事件。以下是一个简单的示例，演示如何使用 onoffline 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><p id="status">当前网络状态：在线</p><script> // 获取显示状态的元素 var statusElement = document.getElementById("status"); // 添加 onoffline 事...
在 HTML DOM 中，metaKey 是一个事件属性，通常用于处理与键盘事件（如键盘按下、键盘松开等）相关的事件。metaKey 属性表示是否按下了操作系统特定键（例如，在 macOS 上是 Command 键，在 Windows 上是 Ctrl 键）。以下是一个简单的示例，演示如何使用 metaKey 属性处理键盘事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><p>按下 Ctrl 键（或 Command 键）并点击按钮：</p><button id="myButton">点击我</button><s...
在 HTML DOM 中，which 事件属性用于获取按下的键的 ASCII 值或者特殊键的标识符。通常，which 属性用于处理键盘事件（如键盘按下、键盘松开等）。以下是一个简单的示例，演示如何使用 which 属性处理键盘事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><input type="text" id="myInput" onkeydown="keyDownHandler(event)"><script> function keyDownHandler(event) { va...
onseeked 事件是 HTML DOM 中用于处理媒体元素（例如 <audio> 和 <video>）的事件之一。当媒体元素的播放位置被用户改变并且新的位置已经确定时，onseeked 事件会被触发。以下是一个简单的示例，演示如何使用 onseeked 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><audio controls id="myAudio"> <source src="example.mp3" type="audio/mp3"> Your brows...
animationstart 事件是 JavaScript 和 HTML DOM 中用于处理 CSS 动画开始时触发的事件。当 CSS 动画开始播放时，animationstart 事件会被触发，允许开发者执行相应的 JavaScript 操作。以下是一个简单的例子，演示如何使用 animationstart 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @keyframes exampleAnimation { from { background-color: red; } to { background-color: yellow; } } .anima...
onprogress 事件是 HTML DOM 中 <audio> 和 <video> 元素的事件之一。它在媒体资源正在下载过程中，浏览器接收到数据时触发。以下是一个简单的例子，演示如何使用 onprogress 事件：<!DOCTYPE html><html><head> <title>onprogress Event Example</title></head><body> <progress id="myProgress" max="100" value="0"></progress> <br> <audio id="myAudio" controls onprogress="handleProgress()"> <source src="example.mp3" ...
onsuspend 事件是 HTML DOM 中 <audio> 和 <video> 元素的事件之一。它在媒体暂停加载时触发。以下是一个简单的例子，演示如何使用 onsuspend 事件：<!DOCTYPE html><html><head> <title>onsuspend Event Example</title></head><body> <video id="myVideo" width="640" height="360" controls onsuspend="handleSuspend()"> <source src="example.mp4" type="video/mp4"> Your browser does not support the video tag. </...
ondurationchange 事件是 HTML DOM 中 <audio> 和 <video> 元素的事件之一。它在媒体的持续时间（duration）发生变化时触发。以下是一个简单的例子，演示如何使用 ondurationchange 事件：<!DOCTYPE html><html><head> <title>ondurationchange Event Example</title></head><body> <video id="myVideo" width="640" height="360" controls ondurationchange="handleDurationChange()"> <source src="example.mp4" type="video/mp4"> You...
onpagehide 事件是 HTML DOM 中的一个事件，它在页面即将被隐藏或卸载时触发。这个事件通常在用户离开当前页面或关闭浏览器选项卡时触发。以下是一个简单的例子，演示如何使用 onpagehide 事件：<!DOCTYPE html><html><head> <title>onpagehide Event Example</title></head><body onpagehide="handlePageHide()"> <h1>This is a sample page</h1> <script> // 处理页面隐藏事件 function handlePageHide() { alert("Page is being hidden or unloaded."); } </script></body><...
最新文章