Event

[TOC]

索引

属性：

事件目标
event.target：EventTarget，触发事件的元素（如用户直接点击的子元素）。
event.currentTarget：EventTarget，绑定事件处理函数的元素（等同于 this）。
event.type：string，事件类型（如 "click"、"keydown"）。
event.eventPhase：number，事件流所处阶段。
尺寸（鼠标事件）
mouseEvent.clientX / mouseEvent.clientY：number，只读，不带单位，鼠标指针相对于视口坐标系的 X/Y 坐标。
mouseEvent.offsetX / mouseEvent.offsetY：number，只读，不带单位，鼠标指针相对于目标节点内边位置的 X/Y 坐标。
mouseEvent.pageX / mouseEvent.pageY：number，只读，不带单位，鼠标指针相对于整个文档的 X/Y 坐标。
mouseEvent.screenX / mouseEvent.screenY：number，只读，不带单位，鼠标指针相对于屏幕的 X/Y 坐标。
键盘事件
keyboardEvent.key：，
keyboardEvent.code：，
keyboardEvent.keyCode：，已废弃，

方法：

event.preventDefault()：()，用于阻止事件的默认行为（如表单提交、链接跳转）。
event.stopPropagation()：()，用于阻止事件在 DOM 树中继续传播（包括捕获和冒泡阶段）。
event.stopImmediatePropagation()：()，阻止事件继续传播，且停止执行当前元素的其他监听器。

事件：

鼠标事件：

click：鼠标点击元素（按下并释放左键）。
dblclick：鼠标双击元素。
contextmenu：右键点击元素（弹出上下文菜单前）。
mousedown / mouseup：鼠标按下 / 释放。
mousemove：鼠标在元素内移动。
mouseenter / mouseleave：不冒泡，鼠标进入 / 离开元素本身。仅在进入目标元素时触发一次，子元素之间移动不触发。
mouseover / mouseout：冒泡，鼠标进入 / 离开元素或其子元素。鼠标在元素和子元素之间移动时会重复触发。

键盘事件：

keydown：按下键盘任意键。
keyup：松开键盘按键。

表单事件：

submit：表单提交。
reset：表单重置。
input：输入框内容实时变化。
change：表单元素值变化并失焦（如输入框、下拉框）。
focus / blur：元素获得 / 失去焦点。

窗口事件：

DOMContentLoaded：HTML 解析完成（无需等待样式、图片）。
load：页面及资源（如图片）加载完成。
beforeunload：窗口关闭或刷新前。
resize：窗口大小变化。
scroll：页面滚动。

过渡事件：

transitionend：CSS 过渡结束播放。

触摸事件：

touchstart：触摸开始。
touchmove：触摸移动。
touchend：触摸结束。

剪切板事件：

copy / paste：复制 / 粘贴内容。

媒体事件：

play / pause：媒体播放 / 暂停。

Event

属性

事件目标
event.target：EventTarget，触发事件的元素（如用户直接点击的子元素）。
event.currentTarget：EventTarget，绑定事件处理函数的元素（等同于 this）。
event.type：string，事件类型（如 "click"、"keydown"）。
event.eventPhase：number，事件流所处阶段。
尺寸（鼠标事件）
mouseEvent.clientX / mouseEvent.clientY：number，只读，不带单位，鼠标指针相对于视口坐标系的 X/Y 坐标。
mouseEvent.offsetX / mouseEvent.offsetY：number，只读，不带单位，鼠标指针相对于目标节点内边位置的 X/Y 坐标。
mouseEvent.pageX / mouseEvent.pageY：number，只读，不带单位，鼠标指针相对于整个文档的 X/Y 坐标。
mouseEvent.screenX / mouseEvent.screenY：number，只读，不带单位，鼠标指针相对于屏幕的 X/Y 坐标。
键盘事件
keyboardEvent.key：，
keyboardEvent.code：，
keyboardEvent.keyCode：，已废弃，

方法

preventDefault()

event.preventDefault()：()，用于阻止事件的默认行为（如表单提交、链接跳转）。

特性：
1. 检查事件是否可取消
  通过 event.cancelable 属性判断事件是否允许阻止默认行为，部分事件的默认行为无法阻止（如大多数 DOMContentLoaded、load 事件）。
  js
```
element.addEventListener("click", (event) => {
  if (event.cancelable) {
    event.preventDefault(); // 仅在可取消时调用
  }
});
```
  1
  2
  3
  4
  5
2. 对比return false
  - event.preventDefault()：仅阻止默认行为，不影响事件冒泡。
  - return false：同时阻止默认行为和冒泡（在 DOM 属性事件中）。
  html
```
<a href="#" onclick="return false;">点击</a> 
```
  1
3. 异步调用无效
  preventDefault() 必须在事件处理函数同步调用，异步代码中调用无效
  js
```
element.addEventListener("click", async (event) => {
  await someAsyncTask();
  event.preventDefault(); // 无效！默认行为已触发
});
```
  1
  2
  3
  4

示例：

阻止表单提交刷新页面

html

<form id="myForm">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", (event) => {
    event.preventDefault(); // 阻止表单提交刷新
    const data = new FormData(event.target);
    sendDataToServer(data); // 自定义异步提交
  });
</script>

自定义右键菜单

document.addEventListener("contextmenu", (event) => {
  event.preventDefault(); // 阻止默认右键菜单
  showCustomMenu(event.clientX, event.clientY); // 显示自定义菜单
});

禁用链接跳转

html

<a id="myLink" href="https://example.com">阻止跳转的链接</a>

<script>
  document.getElementById("myLink").addEventListener("click", (event) => {
    event.preventDefault(); // 阻止跳转
    console.log("点击了链接，但未跳转");
  });
</script>

stopPropagation()

event.stopPropagation()：()，用于阻止事件在 DOM 树中继续传播（包括捕获和冒泡阶段）。

特性：
1. 阻止事件传播
  在捕获阶段调用：阻止事件向下传递到目标元素。
  在目标阶段调用：阻止事件进入冒泡阶段。
  在冒泡阶段调用：阻止事件向上冒泡到父元素。
2. 不影响默认行为
  仅阻止事件传播，不会阻止浏览器默认行为（如点击链接跳转、表单提交）。

示例：

阻止事件冒泡

html

<div id="parent">
  <button id="child">点击我</button>
</div>

<script>
  document.getElementById("child").addEventListener("click", function(event) {
    event.stopPropagation(); // 阻止冒泡
    console.log("子元素被点击");
  });

  document.getElementById("parent").addEventListener("click", function() {
    console.log("父元素被点击"); // 不会执行
  });
</script>

阻止事件捕获

document.getElementById("parent").addEventListener("click", function() {
  event.stopPropagation(); // 阻止捕获传递
  console.log("捕获阶段 - 父元素");
}, true); // 捕获阶段监听

document.getElementById("child").addEventListener("click", function(event) {
  console.log("子元素被点击"); // 不会执行
});

stopImmediatePropagation()【

event.stopImmediatePropagation()：()，阻止事件继续传播，且停止执行当前元素的其他监听器。

事件

~~常见事件~~：

鼠标事件：

click：鼠标点击元素（按下并释放左键）。
dblclick：鼠标双击元素。
contextmenu：右键点击元素（弹出上下文菜单前）。
mousedown / mouseup：鼠标按下 / 释放。
mousemove：鼠标在元素内移动。
mouseenter / mouseleave：不冒泡，鼠标进入 / 离开元素本身。仅在进入目标元素时触发一次，子元素之间移动不触发。
mouseover / mouseout：冒泡，鼠标进入 / 离开元素或其子元素。鼠标在元素和子元素之间移动时会重复触发。

键盘事件：

keydown：按下键盘任意键。
keyup：松开键盘按键。

表单事件：

submit：表单提交。
reset：表单重置。
input：输入框内容实时变化。
change：表单元素值变化并失焦（如输入框、下拉框）。
focus / blur：元素获得 / 失去焦点。

窗口事件：

DOMContentLoaded：HTML 解析完成（无需等待样式、图片）。
load：页面及资源（如图片）加载完成。
beforeunload：窗口关闭或刷新前。
resize：窗口大小变化。
scroll：页面滚动。

过渡事件：

transitionend：CSS 过渡结束播放。

触摸事件：

touchstart：触摸开始。
touchmove：触摸移动。
touchend：触摸结束。

剪切板事件：

copy / paste：复制 / 粘贴内容。

媒体事件：

play / pause：媒体播放 / 暂停。

Event ​

索引 ​

Event ​

属性 ​

方法 ​

preventDefault() ​

stopPropagation() ​

stopImmediatePropagation()【 ​

事件 ​

Event

索引

Event

属性

方法

preventDefault()

stopPropagation()

stopImmediatePropagation()【

事件