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：string，返回 按下的键的字符串值，直接表示实际输入的字符（区分大小写，如'a', 'A',）。
keyboardEvent.code：string，返回 物理按键的编码，与键盘布局无关(如'KeyA')。
keyboardEvent.keyCode：number，已废弃，获取用户按下键盘按键的 ASCII 键码值。

方法：

new Event()：(type, options?)，用于创建一个自定义事件对象，该对象可被分派（触发）到 DOM 元素，并通过事件监听器处理。
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：string，返回 按下的键的字符串值，直接表示实际输入的字符（区分大小写，如'a', 'A',）。
keyboardEvent.code：string，返回 物理按键的编码，与键盘布局无关(如'KeyA')。
keyboardEvent.keyCode：number，已废弃，获取用户按下键盘按键的 ASCII 键码值。

方法

Event()

new Event()：(type, options?)，用于创建一个自定义事件对象，该对象可被分派（触发）到 DOM 元素，并通过事件监听器处理。

type：string，表示事件类型（如 "click" 或自定义的 "customEvent"）。
options?：{bubbles?,cancelable?,composed?}，用于配置事件的特性（如冒泡、可取消性等）。
- bubbles?：boolean，默认：false，事件是否冒泡。
- cancelable?：boolean，默认：false，事件能否能通过 event.preventDefault() 取消默认行为。
- composed?：boolean，默认：false，事件是否可穿过 Shadow DOM 边界，冒泡到外部 DOM（用于 Web Components）。
返回：
event：Event，创建的自定义事件对象。
特性：
1. 兼容性：现代浏览器均支持 new Event()，但 IE 11 及更早版本需使用 document.createEvent()
  js
```
const event = document.createEvent("Event");
event.initEvent("build", true, true); // 参数：类型、冒泡、可取消
```
  1
  2
2. 默认行为：事件默认不冒泡且不可取消，需通过 options 显式配置。
3. 性能：高频触发事件时，建议结合防抖或节流优化。
4. 对比CustomEvent：
  - Event：基础事件类型，不支持传递自定义数据。
  - CustomEvent：继承自 Event，可通过 detail 属性传递数据：
  js
```
const customEvent = new CustomEvent("log", {
  detail: { message: "用户登录成功", timestamp: Date.now() }
});
element.dispatchEvent(customEvent);

element.addEventListener("log", (e) => {
  console.log(e.detail.message); // 输出：用户登录成功
});
```
  1
  2
  3
  4
  5
  6
  7
  8

示例：

创建并触发事件：

// 1. 创建事件
const customEvent = new Event("alert", {
  bubbles: true,
  cancelable: true
});

// 2. 触发事件
document.querySelector("#myButton").dispatchEvent(customEvent);

// 3. 监听事件
document.querySelector("#myButton").addEventListener("alert", (e) => {
  console.log("Alert事件被触发！");
});

结合 preventDefault() 使用：若事件为 cancelable: true，可阻止默认行为

document.addEventListener("myCancelableEvent", (e) => {
  if (someCondition) {
    e.preventDefault(); // 仅在 cancelable: true 时有效
  }
});

const event = new Event("myCancelableEvent", { cancelable: true });
document.dispatchEvent(event);

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()：()，阻止事件继续传播，且停止执行当前元素的其他监听器。

特性：
1. 阻止事件传播：与 stopPropagation() 类似，会终止事件在 DOM 树中的传播（捕获或冒泡）。
2. 阻止同一元素的其他监听器执行：当前元素上后续绑定的同类型事件监听器将被跳过，不再执行。
3. 独占事件处理：当需要确保某个事件监听器是唯一被执行的逻辑时（如避免插件或库的监听器干扰）。
4. 资源竞争控制：在多个监听器可能操作同一资源（如修改 DOM 或发送请求）时，优先执行关键监听器并阻止其他操作。
5. 性能优化：避免不必要的后续监听器逻辑执行（例如高频事件中）。
6. 执行顺序依赖绑定顺序：监听器的执行顺序由绑定顺序决定，需确保关键监听器先绑定。
7. 异步代码中的无效调用：在异步回调（如 setTimeout）中调用此方法无效，因为事件传播已同步完成：
  js
```
button.addEventListener("click", (event) => {
  setTimeout(() => {
    event.stopImmediatePropagation(); // 无效！
  }, 0);
});
```
  1
  2
  3
  4
  5
8. 对比 stopPropagation()：
  - stopPropagation()：仅阻止事件传播（捕获/冒泡），不干预同一元素的其他监听器。
  - stopImmediatePropagation()：既阻止事件传播，又阻止同一元素的其他监听器执行（优先级更高）。
  js
```
const button = document.querySelector("button");

// 监听器1
button.addEventListener("click", (event) => {
  event.stopImmediatePropagation(); // 关键调用
  console.log("监听器1执行");
});

// 监听器2
button.addEventListener("click", () => {
  console.log("监听器2执行"); // 不会触发
});

// 监听器3（父元素）
document.body.addEventListener("click", () => {
  console.log("父元素监听器"); // 不会触发（传播被终止）
});

button.click(); // 仅输出：监听器1执行
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

示例：

阻止第三方库的监听器：

// 假设第三方库为按钮添加了监听器
thirdPartyLib.initButton(button); // 内部可能绑定多个事件

// 自定义监听器（需优先执行并阻止其他监听器）
button.addEventListener("click", (event) => {
  event.stopImmediatePropagation();
  console.log("自定义逻辑执行，阻止第三方逻辑");
});

表单提交前的独占验证：

const form = document.querySelector("form");

// 第一个监听器：执行验证并阻止其他逻辑
form.addEventListener("submit", (event) => {
  if (!validateForm()) {
    event.preventDefault();
    event.stopImmediatePropagation(); // 阻止后续监听器
    console.log("表单验证失败，提交已终止");
  }
});

// 第二个监听器（如异步提交）
form.addEventListener("submit", () => {
  console.log("此逻辑在验证失败时不会执行");
});

事件

~~常见事件~~：

鼠标事件：

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 ​

属性 ​

方法 ​

Event() ​

preventDefault() ​

stopPropagation() ​

stopImmediatePropagation() ​

事件 ​

Event

索引

Event

属性

方法

Event()

preventDefault()

stopPropagation()

stopImmediatePropagation()

事件