在 HTML DOM 事件对象中，key 是一个属性，用于表示与事件关联的按键信息。对于键盘事件，这个属性通常包含被按下的键的标识符。以下是一个简单的例子，演示如何使用 key 属性获取按下的键：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>key 示例</title></head><body><p id="demo">按下键盘查看键的信息</p><script> // 获取页面上的 <p> 元素 var paragraph = document.getElementById(...
currentTarget 是 HTML DOM 事件对象中的一个属性，它返回事件的当前目标，即事件正被处理的元素。与之相对的是 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 示例</title></head><body><div id="outer" style="border: 2px solid red; padding: 10px;"> <...
cancelable 是 HTML DOM 事件对象中的一个布尔属性，用于指示事件是否可以被取消（即阻止默认行为或停止事件传播）。如果 cancelable 的值为 true，则表示事件可以被取消；如果 cancelable 的值为 false，则表示事件不可以被取消。以下是一个简单的例子，演示如何使用 cancelable 属性检测事件是否可以被取消：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cancelable 示例</title></head><body><p id="demo">点击链接</p><...
shiftKey 是 HTML DOM 事件对象中的一个布尔属性，用于指示事件被触发时是否按下了 Shift 键。如果 shiftKey 的值为 true，则表示在触发事件时按下了 Shift 键；如果 shiftKey 的值为 false，则表示在触发事件时未按下 Shift 键。以下是一个简单的例子，演示如何使用 shiftKey 属性检测是否按下了 Shift 键：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>shiftKey 示例</title></head><body><p id="demo">按下 Shift 键...
ctrlKey 是 HTML DOM 事件对象中的一个布尔属性，用于指示事件被触发时是否按下了 Ctrl 键。如果 ctrlKey 的值为 true，则表示在触发事件时按下了 Ctrl 键；如果 ctrlKey 的值为 false，则表示在触发事件时未按下 Ctrl 键。以下是一个简单的例子，演示如何使用 ctrlKey 属性检测是否按下了 Ctrl 键：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ctrlKey 示例</title></head><body><p id="demo">按下 Ctrl 键并点击页面</...
bubbles 是 HTML DOM 事件对象中的一个布尔属性，用于指示事件是否冒泡。冒泡是指事件在触发后是否向上传播到DOM树的更高层次。如果 bubbles 属性为 true，表示事件会冒泡，即从触发事件的目标元素开始，沿着DOM树向上传播。如果 bubbles 属性为 false，表示事件不会冒泡，即事件只会在触发事件的目标元素上被处理，不会向上传播到更高层次的元素。以下是一个简单的例子，演示了事件冒泡的概念：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件冒泡示例</title></head><body><div id="oute...
HTML DOM 中的事件对象包含有关事件的信息，而 clientY 是其中一个属性，表示鼠标指针在事件被触发时相对于浏览器窗口的 Y 坐标。以下是一个简单的例子，演示如何在 JavaScript 中使用事件对象的 clientY 属性：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clientY 示例</title></head><body><p id="demo">点击页面查看鼠标 Y 坐标</p><script> // 获取页面上的 <p> 元素 var paragrap...
screenX 是 HTML DOM 事件对象中的一个属性，它通常用于鼠标事件（如 mousemove、mousedown、mouseup 等），表示鼠标事件发生时，鼠标指针相对于整个屏幕的水平坐标。以下是一个简单的例子，演示如何使用 screenX 属性来获取鼠标指针的水平坐标：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>screenX 属性示例</title> <style> body { height: 100vh; margin: 0; display: flex; align-items: center; ju...
clientX 是 HTML DOM 事件对象中的一个属性，它通常用于鼠标事件（如 mousemove、mousedown、mouseup 等），表示鼠标事件发生时，鼠标指针相对于浏览器窗口客户区域（viewport）的水平坐标。以下是一个简单的例子，演示如何使用 clientX 属性来获取鼠标指针的水平坐标：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clientX 属性示例</title> <style> body { height: 100vh; margin: 0; display: flex; align-items: ...
relatedTarget 是 HTML DOM 事件对象中的一个属性，它通常用于鼠标事件和焦点事件，表示与事件相关的目标元素。具体来说，relatedTarget 属性在以下事件中通常被使用：1. mouseover 和 mouseout 事件： - 在 mouseover 事件中，relatedTarget 表示鼠标移入目标元素之前所在的元素。 - 在 mouseout 事件中，relatedTarget 表示鼠标移出目标元素后所进入的元素。2. focusin 和 focusout 事件： - 在 focusin 事件中，relatedTarget 表示失去焦点之前具有焦点的元素。 - 在 focusout 事件中，relatedTarget 表示获得焦点后具有焦点的元素。以下是一个简单的例子，演示如何使用 relatedTarget 属性：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
onoffline 事件是 HTML DOM 中的一种事件，它在浏览器检测到设备离线（断开网络连接）时触发。相对应的，有一个 ononline 事件，它在设备重新上线（重新连接到网络）时触发。以下是一个简单的例子，演示如何使用 onoffline 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onoffline 事件示例</title></head><body><script> window.addEventListener('offline', function() { console.log('设备已离线！'...
metaKey 是 HTML DOM 事件对象中的一个属性，它通常用于检测在事件被触发时是否按下了 Meta 键。Meta 键通常是指在 Windows 上的 Windows 键（也称为 Super 键）、在 Mac 上的 Command 键。以下是一个简单的例子，演示如何使用 metaKey 属性来检测是否按下了 Meta 键：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>metaKey 事件属性示例</title></head><body><button onclick="handleClick(event)">点击我</bu...
onseeked 事件是 HTML DOM 中的一种事件，它在媒体播放器完成跳跃（seek）操作时触发。媒体跳跃是指通过设置媒体元素的 currentTime 属性来改变当前播放位置。以下是一个简单的例子，演示如何使用 onseeked 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onseeked 事件示例</title></head><body><audio controls onseeked="handleSeeked()"> <source src="example.mp3" type=&quo...
animationstart 事件是 HTML DOM 中的一种事件，它在 CSS 动画开始播放时触发。这个事件通常与 CSS 动画一起使用，以便在动画开始时执行一些逻辑。以下是一个简单的例子，演示如何使用 animationstart 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>animationstart 事件示例</title> <style> @keyframes myAnimation { from { transform: translateX(0); } to { transform: tra...
onprogress 事件是 HTML DOM 中的一种事件，它在浏览器接收数据时触发，通常用于监测资源（如图像、音频、视频等）的下载进度。这个事件通常与加载大型文件或资源时一起使用，以便提供用户有关加载进度的反馈。以下是一个简单的例子，演示如何使用 onprogress 事件来监测图片的加载进度：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onprogress 事件示例</title></head><body><img src="example.jpg" alt="Example Image" onprogress=&...
onsuspend 事件是 HTML DOM 中的一种事件，它在浏览器检测到媒体的加载被暂停时触发。这个事件通常与媒体元素（如 <audio> 或 <video>）一起使用，用于处理在媒体加载被暂停时执行的逻辑。以下是一个简单的例子，演示如何使用 onsuspend 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onsuspend 事件示例</title></head><body><video controls onsuspend="handleSuspend()"> <source src=&qu...
ondurationchange 事件是 HTML DOM 中的一种事件，它在音频或视频的持续时间（duration）发生变化时触发。这个事件通常在媒体元素的 duration 属性发生变化时被触发，例如在媒体文件加载期间。以下是一个简单的例子，演示如何使用 ondurationchange 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ondurationchange 事件示例</title></head><body><audio controls ondurationchange="handleDurationChange()"&g...
onpagehide 事件是 HTML DOM 中的一个事件，它在页面即将被隐藏或关闭时触发。具体来说，它在用户离开当前页面、导航到另一个页面或关闭浏览器标签时触发。这个事件通常用于执行在页面关闭前需要处理的逻辑。以下是一个简单的例子，演示如何使用 onpagehide 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onpagehide 事件示例</title></head><body><script> window.onpagehide = function(event) { // 判断页面是否被缓存 if (event.persis...
onpageshow 事件是 HTML DOM 中的一个事件，它在页面被加载时触发。具体来说，它在页面首次加载时和在页面从缓存中恢复时都会触发。这个事件通常用于执行一些初始化操作或者在页面从缓存中重新加载时执行特定的逻辑。以下是一个简单的例子，演示如何使用 onpageshow 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onpageshow 事件示例</title></head><body><script> window.onpageshow = function(event) { if (event.persisted) { ...
onpaste 事件是 HTML DOM 中的一种事件，它在用户粘贴内容到指定元素时触发。这个事件通常与文本输入框或可编辑元素一起使用，以便在用户粘贴文本时执行相应的操作。以下是一个简单的例子，演示如何使用 onpaste 事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onpaste 事件示例</title></head><body><textarea id="myTextarea" onpaste="handlePaste(event)" placeholder="尝试粘贴文本"><...
最新文章