事件对象

yuhuo2022-02-14JavaScriptJavaScript对象

EventTarget 类

EventTarget 接口 - JavaScript 教程 - 网道 (wangdoc.com)open in new window

1. 原型方法

原型方法	描述
addEventListener(type, listener[, useCapture])	在当前对象定义一个指定事件的监听函数。 (定义多次不同监听函数则按定义顺序执行，定义多次相同监听函数则只会保留执行一个)
removeEventListener(type, listener[, useCapture])	移除监听函数，参数中的值和对象必须和 addEventListener 方法完全一致。
dispatchEvent(event)	触发指定事件。只要有一个监听函数调用了 preventDefault 方法，则返回值为 false，否则为 true。

2. 定义事件监听函数

方式一

// 参数1：事件类型
// 参数2：监听函数
// 参数3：是否在捕获阶段触发（可选）
button.addEventListener('click', function(event) {
    // this指向当前事件所在的对象
    console.log(this.nodeName);
}, false);

// 参数1：事件类型
// 参数2：具有 handleEvent 方法的对象
// 参数3：配置对象（可选）
button.addEventListener('click', {
  	handleEvent: function (event) {
    	console.log('click');
  	}
},{
    capture: false, // 是否在捕获阶段触发，默认false（即冒泡阶段触发）
    once: false, // 是否只触发一次，默认false
    passive: false, // 是否立即进行浏览器默认行为，默认false
    signal: null, // AbortSignal 对象，为监听器设置了一个信号通道???
});

注意

当设置了 passive: true，事件触发时将立即进行浏览器默认行为，而不再等待监听函数执行完成。此时在监听函数中调用 event.preventDefault() 是无效的且会报错。

一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

方式二

// 只在冒泡阶段触发，同一事件只能定义一个监听函数，不推荐
button.onclick = function (event) {
  	console.log('触发事件');
};

方式三

<!-- 只在冒泡阶段触发，同一事件只能定义一个监听函数，不推荐 -->
<!-- 在该局部作用域内包含了 event 变量作为事件对象 -->
<button onclick="handleEvent(event)">点击触发事件</button>

小结

推荐使用 addEventListener 的方式定义事件监听函数，优点如下：

能指定在冒泡阶段还是捕获阶段触发
同一事件可以添加多个监听函数
除了 DOM 节点，其他对象（比如 window、XMLHttpRequest 等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口

3. 事件传播

第一阶段（捕获阶段）：从 window 对象传导到目标节点（上层传到底层）
第二阶段（目标阶段）：在目标节点上触发
第三阶段（冒泡阶段）：从目标节点传导回 window 对象（从底层传回上层）

假定文档结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div>
        <button>按钮</button>
    </div>
</body>
</html>

点击 button 按钮，具体事件传播如下：

window 捕获 → document 捕获→ html 捕获 → body 捕获 → div 捕获 → button 目标（捕获）

↓

window 冒泡 ← document 冒泡 ← html 冒泡 ← body 冒泡 ← div 冒泡 ← button 目标（冒泡）

Event 类

Event 对象 - JavaScript 教程 - 网道 (wangdoc.com)open in new window

Event 对象继承图open in new window

1. 事件类型

（1）表单事件（触发对象：相关表单对象）

select：input，textarea 里面选中文本
change：input，textarea，select 的值发生变化（文本框或文本域的值变化后需要失去焦点才触发）
invalid：表单成员的值不满足校验条件（如 <input required> 输入框是必填的，当为空时提交表单，在input 上触发）
reset：form 表单重置
submit：form 表单提交

（2）资源事件（触发对象：window，img，link，script 等资源相关对象）

unload：资源卸载时
load：资源加载完成
abort：资源加载中止
error：资源加载错误

（3）状态事件（触发对象：document 对象）

readystatechange ：readyState 属性变化
DOMContentLoaded：解析完成，加载外部资源中

页面加载事件流程

解析HTML，执行JavaScript（document.readyState = loading）
加载外部资源（document.readyState = interactive）
① documet->readystatechange 事件触发
② documet->DOMContentLoaded 事件触发
加载完成（document.readyState = complete）
③ documet->readystatechange 事件触发
④ window->load 事件触发
⑤ window->pageshow 事件触发

（4）文档事件（触发对象：文档或文档元素）

scroll ：文档或文档元素滚动
fullscreenchange：文档元素全屏状态改变
fullscreenerror：文档元素全屏状态改变失败

（5）window事件（触发对象：window 对象）

resize ：窗口大小改变
beforeprint：打印弹窗打开（window.print() 或 Ctrl + P）
afterprint：打印弹窗关闭（取消或完成）

（6）媒体事件（触发对象：HTMLAudioElement 对象，HTMLVideoElement 对象）

loadstart：开始加载媒体文件时触发
progress：媒体文件加载过程中触发，大概是每秒触发2到8次
loadedmetadata：媒体文件元数据加载成功时触发
loadeddata：当前播放位置加载成功后触发
canplay：已经加载了足够的数据，可以开始播放时触发，后面可能还会请求数据。
canplaythrough：已经加载了足够的数据，可以一直播放时触发，后面不需要继续请求数据
suspend：已经缓冲了足够的数据，暂时停止下载时触发
stalled：尝试加载数据，但是没有数据返回时触发
play：调用 play() 方法时或自动播放启动时触发。如果已经加载了足够的数据，这个事件后面会紧跟playing 事件，否则会触发 waiting 事件
waiting：由于没有足够的缓存数据，无法播放或播放停止时触发。一旦缓冲数据足够开始播放，后面就会紧跟 playing 事件
playing：媒体开始播放时触发
timeupdate：currentTime属性变化时触发，每秒可能触发4到60次
pause：调用 pause() 方法、播放暂停时触发
seeking：脚本或者用户要求播放某个没有缓冲的位置，播放停止开始加载数据时触发。此时，seeking 属性返回 true
seeked：seeking 属性变回 false 时触发
ended：媒体文件播放完毕时触发
durationchange：duration属性变化时触发
volumechange：音量变化时触发
ratechange：播放速度或默认的播放速度变化时触发
abort：停止加载媒体文件时触发，通常是用户主动要求停止下载
error：网络或其他原因导致媒体文件无法加载时触发
emptied：由于 error 或 abort 事件导致 networkState 属性变成无法获取数据时触发

（7）媒体流事件（触发对象：MediaStream 对象）

addtrack ：添加轨道对象，调用 addTrack() 方法触发
removeTrack：移除轨道对象，调用 removeTrack() 方法触发

（8）媒体设备事件（触发对象：navigator.mediaDevices 对象）

devicechange ：媒体设备连接状态变化

2. 创建对象

用户行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new Event("事件类型", {
    bubbles: false, // 是否冒泡，（注意：未显式指定为 true，是默认不会冒泡的）
	cancelable: false, // 是否可用 preventDefault() 取消事件，即 preventDefault() 无效
});

3. 静态属性

静态属性	描述
CAPTURING_PHASE	1，表示捕获阶段
AT_TARGET	2，表示目标阶段
BUBBLING_PHASE	3，表示冒泡阶段

4. 原型属性

原型属性	描述
type	返回事件类型
bubbles	返回当前事件是否会冒泡
cancelable	返回事件是否可用 preventDefault() 取消
defaultPrevented	返回事件是否调用过 preventDefault() 方法
cancelBubble	false 事件正常传播，true 阻止事件传播，等同于 stopPropagation() 方法
target	返回原始触发节点对象
currentTarget	返回当前事件通过的节点对象，即绑定事件监听函数的元素
eventPhase	返回事件目前的阶段：0 未发生，1 捕获阶段，2 目标阶段，3 冒泡阶段
timeStamp	返回一个毫秒时间戳，表示事件发生的时间，相对于网页加载成功开始计算的
isTrusted	返回事件是否由真实的用户行为产生
detail	返回详情信息，用户界面事件才具有。如鼠标点击事件，则表示鼠标点击次数；鼠标滚轮事件，则表示鼠标滚动的距离；

5. 原型方法

原型方法	描述
preventDefault()	阻止浏览器默认行为，如点击链接跳转页面，点击空格键向下滚动等，不会影响事件传播。（注意：需要事件对象的 cancelable 为 true 才生效）
stopPropagation()	阻止事件继续传播（不包括在当前节点上的其他事件监听函数）
stopImmediatePropagation()	阻止事件继续传播（包括在当前节点上的其他事件监听函数）
composedPath()	返回事件冒泡经过的从最底层到最顶层的所有节点的 Array 数组

MouseEvent 类

鼠标事件 - JavaScript 教程 - 网道 (wangdoc.com)open in new window

1. 事件类型

（1）点击事件

click：点击鼠标左键
dblclick：双击鼠标左键
mousedown：按下鼠标任何键
mouseup：释放按下的鼠标任何键

（2）移动事件

mousemove：鼠标移动
mouseenter：鼠标进入父节点（从父节点进出子节点不触发）
mouseleave：鼠标离开父节点（从父节点进出子节点不触发）
mouseover：鼠标进入父节点（从父节点进出子节点也会触发）
mouseout：鼠标离开父节点（从父节点进出子节点也会触发）

（触发对象：鼠标所在的位置的元素对象）

2. 创建对象

鼠标行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new MouseEvent("事件类型", {
    ..., // Event 参数
    screenX: 0, // 鼠标位置相对于屏幕的水平坐标
    screenY: 0, // 鼠标位置相对于屏幕的垂直坐标
    clientX: 0, // 鼠标位置相对于浏览器窗口的水平坐标
    clientY: 0, // 鼠标位置相对于浏览器窗口的垂直坐标
    ctrlKey: false, // 是否同时按下了 Ctrl 键
    shiftKey: false, // 是否同时按下了 Shift 键
    altKey: false, // 是否同时按下了 Alt 键
    metaKey: false, // 是否同时按下了 Meta 键（Windows 键）
    button: 0, // 按下了哪一个鼠标按键
    buttons: 0, // 按下了哪些鼠标按键
    relatedTarget: null, // 事件的相关节点对象
});

3. 原型属性

原型属性	描述
screenX	返回鼠标位置相对于屏幕的水平坐标
screenY	返回鼠标位置相对于屏幕的垂直坐标
clientX	返回鼠标位置相对于浏览器窗口的水平坐标
clientY	返回鼠标位置相对于浏览器窗口的垂直坐标
x	同 clientX
y	同 clientY
ctrlKey	返回是否同时按下了 Ctrl 键
shiftKey	返回是否同时按下了 Shift 键
altKey	返回是否同时按下了 Alt 键
metaKey	返回是否同时按下了 Meta 键（Windows 键）
button	返回按下了哪一个鼠标按键：0 鼠标左键，1 鼠标中键，2 鼠标右键
buttons	返回按下了哪些鼠标按键：001 鼠标左键，010 鼠标右键，100 鼠标中键（二进制）
movementX	返回当前位置与上一个 mousemove 事件之间的水平距离
movementY	返回当前位置与上一个 mousemove 事件之间的垂直距离
offsetX	返回鼠标位置与目标节点左侧的 padding 边缘的水平距离
offsetY	返回鼠标位置与目标节点上侧的 padding 边缘的垂直距离
pageX	返回鼠标位置与文档左侧边缘的水平距离（包括文档不可见的部分）
pageY	返回鼠标位置与文档上侧边缘的垂直距离
relatedTarget	返回事件的相关节点对象，如： mouseenter / mouseover / dragenter 事件中表示将离开的节点， mouseleave / mouseout / dragexit 事件中表示将进入的节点

4. 原型方法

原型方法	描述
getModifierState(keyStr)	根据功能键字符串，返回是否有按下该按键

WheelEvent 类

1. 事件类型

wheel：鼠标滚轮滚动

（触发对象：鼠标所在的位置的元素对象）

2. 创建对象

鼠标滚轮行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new WheelEvent("事件类型", {
	..., // MouseEvent 参数
    deltaX: 0, // 滚轮的水平滚动量
    deltaY: 0, // 滚轮的垂直滚动量
    deltaZ: 0, // 滚轮的Z轴滚动量
    deltaMode: 0, // 滚动的单位
});

3. 原型属性

原型属性	描述
deltaX	返回滚轮的水平滚动量
deltaY	返回滚轮的垂直滚动量
deltaZ	返回滚轮的Z轴滚动量
deltaMode	返回滚动的单位：0 像素，1 行，2 页

PointerEvent 类

1. 事件类型

（1）点击事件

pointerdown：按下指针
pointerup：释放按下的指针

（2）移动事件

pointermove：指针移动
pointerenter：指针进入父节点（从父节点进出子节点不触发）
pointerleave：指针离开父节点（从父节点进出子节点不触发）
pointerover：指针进入父节点（从父节点进出子节点也会触发）
pointerout：指针离开父节点（从父节点进出子节点也会触发）

（3）其他事件

contextmenu：出现上下文菜单（释放按下的鼠标右键）
pointercancel：针将不再能够生成事件???
gotpointercapture：指针捕获元素???
lostpointercapture：指针释放元素???

（触发对象：指针所在的位置的元素对象）

2. 创建对象

指针行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new WheelEvent("事件类型", {
	..., // MouseEvent 参数
    pointerId: 0, // 指针的唯一标识符
    width: 0, // 指针的接触几何形状的宽度
    height : 0, // 指针的接触几何形状的高度
    pressure: 0, // 归一化压力，取值 0 ~ 1
    tangentialPressure: 0, // 标准化切向压力，取值 -1 ~ 1
    tiltX: 0, // 指针轴和 Y 轴的平面角度，取值 -90 ~ 90（单位deg）
    tiltY: 0, // 指针轴和 X 轴的平面角度，取值 -90 ~ 90（单位deg）
    twist: 0, // 指针围绕其主轴的顺时针旋转，取值 0 ~ 359（单位deg）
    pointerType: 0, // 指针的设备类型
    isPrimary: 0, // 是否为此指针类型的主指针
});

3. 原型属性

原型属性	描述
pointerId	返回指针的唯一标识符
width	返回指针的接触几何形状的宽度
height	返回指针的接触几何形状的高度
pressure	返回归一化压力，取值 0 ~ 1
tangentialPressure	返回标准化切向压力，取值 -1 ~ 1
tiltX	返回指针轴和 Y 轴的平面角度，取值 -90 ~ 90（单位deg）
tiltY	返回指针轴和 X 轴的平面角度，取值 -90 ~ 90（单位deg）
twist	返回指针围绕其主轴的顺时针旋转，取值 0 ~ 359（单位deg）
pointerType	返回指针的设备类型
isPrimary	返回是否为此指针类型的主指针

4. 原型方法

原型属性	描述
getCoalescedEvents()	返回已合并到调度的 pointermove 事件中的所有 PointerEvent 对象

KeyboardEvent 类

键盘事件 - JavaScript 教程 - 网道 (wangdoc.com)open in new window

1. 事件类型

keypress：按下有值的键盘（如 Ctrl、Alt、Shift、Meta 等为无值键盘）
keydown：按下键盘
keyup：松开键盘

（触发对象：焦点所在的元素对象）

2. 创建对象

键盘行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new KeyboardEvent("事件类型", {
	..., // Event 参数
    key: "", // 键名
    code: "", // 键码
    location: 0, // 键在键盘所处的区域
    ctrlKey: false, // 是否按下了 Ctrl 键
    shiftKey: false, // 是否按下了 Shift 键
    altKey: false, // 是否按下了 Alt 键
    metaKey: false, // 是否按下了 Meta 键（Windows 键）
    repeat: false, // 是否长按不放的重复触发
});

注意

按下有值的键盘时，先触发 keydown 事件，再触发 keypress 事件
一直按键不松开，会连续触发键盘事件：keydown，keypress，keydown，keypress...

3. 原型属性

原型属性	描述
key	返回键名
code	返回键码
location	返回键在键盘所处的区域： 0 主区域或无法判断的区域， 1 左侧（只适用有两个位置的键，如 Ctrl 和 Shift）， 2 右侧（规则同左侧）， 3 数字小键盘区域
ctrlKey	返回是否按下了 Ctrl 键
shiftKey	返回是否按下了 Shift 键
altKey	返回是否按下了 Alt 键
metaKey	返回是否按下了 Meta 键（Windows 键）
repeat	返回是否长按不放的重复触发

4. 原型方法

原型方法	描述
getModifierState(keyStr)	根据功能键字符串，返回是否有按下该按键

InputEvent 类

1. 事件类型

input：输入值变化

（触发对象：<input>、<select>、<textarea>对象）

2. 创建对象

输入值变化行为创建
如 <input>、<select>、<textarea> 的值发生变化
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new InputEvent("事件类型", {
	..., // Event 参数
    inputType: "", // 变化类型
    data: null, // 手动插入的字符串（其他情况返回 null）
    dataTransfer: null, // DataTransfer 对象???
});

3. 原型属性

原型属性	描述
inputType	返回变化类型： insertText 手动插入，insertFromPaste 粘贴插入， deleteContentBackward 向后删除，deleteContentForward 向前删除
data	返回手动插入的字符串（其他情况返回 null）
dataTransfer	返回 DataTransfer 对象???

Touch 类

触摸事件 - JavaScript 教程 - 网道 (wangdoc.com)open in new window

1. 创建对象

触摸行为创建
脚本创建

var touch = new Touch({
    identifier: 0, // 触摸点的唯一 ID
    target: null, // 触摸点开始时所在的元素节点
    clientX: 0, // 触摸点相对于浏览器窗口左侧的水平距离（可选）
    clientY: 0, // 触摸点相对于浏览器窗口上测的垂直距离（可选）
    screenX: 0, // 触摸点相对于屏幕左侧的水平距离（可选）
    screenY: 0, // 触摸点相对于屏幕上侧的垂直距离（可选）
    pageX: 0, // 触摸点相对于文档左侧的水平距离（可选）
    pageY: 0, // 触摸点相对于文档上侧的垂直距离（可选）
    radiusX: 0, // 触摸点周围受到影响的椭圆范围的 X 轴半径（可选）
    radiusY: 0, // 触摸点周围受到影响的椭圆范围的 Y 轴半径（可选）
    rotationAngle: 0, // 触摸区域的椭圆的旋转角度，单位deg，取值0~90（可选）
    force: 0: // 触摸压力，取值0~1（可选）
});

2. 原型属性

原型属性	描述
identifier	返回触摸点的唯一 ID
target	返回触摸点开始时所在的元素节点
clientX	返回触摸点相对于浏览器窗口左侧的水平距离
clientY	返回触摸点相对于浏览器窗口上测的垂直距离
screenX	返回触摸点相对于屏幕左侧的水平距离
screenY	返回触摸点相对于屏幕上侧的垂直距离
pageX	返回触摸点相对于文档左侧的水平距离
pageY	返回触摸点相对于文档上侧的垂直距离
radiusX	返回触摸点周围受到影响的椭圆范围的 X 轴半径
radiusY	返回触摸点周围受到影响的椭圆范围的 Y 轴半径
rotationAngle	返回触摸区域的椭圆的旋转角度，单位deg，取值0~90
force	返回触摸压力，取值0~1

TouchList 类

1. 原型属性

原型属性	描述
length	成员数量

2. 原型方法

原型属性	描述
item()	返回指定位置的成员

TouchEvent 类

1. 事件类型

touchstart：触摸开始
touchend：触摸结束
touchmove：触摸移动
touchcancel：触摸取消（如跳出弹窗，移动离开文档区域等）

（触发对象：触摸所在的位置的元素对象）

2. 创建对象

触摸行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new TouchEvent("事件类型", {
	..., // Event 参数
    touches: [], // 当前处于活跃状态的触摸点的 TouchList 对象
    targetTouches: [], // 所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点的 TouchList 对象
    changedTouches: [], // 本次触摸事件的相关触摸点的 TouchList 对象
	ctrlKey: false, // 是否同时按下了 Ctrl 键
    shiftKey: false, // 是否同时按下了 Shift 键
    altKey: false, // 是否同时按下了 Alt 键
    metaKey: false, // 是否同时按下了 Meta 键（Windows 键）     
});

3. 原型属性

原型属性	描述
touches	返回当前处于活跃状态的触摸点的 TouchList 对象
targetTouches	返回所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点的 TouchList 对象
changedTouches	返回本次触摸事件的相关触摸点的 TouchList 对象，对于不同事件的含义如下 touchstart 事件：被激活的触摸点 touchmove 事件：发生变化的触摸点 touchend 事件：消失的触摸点
ctrlKey	返回是否同时按下了 Ctrl 键
shiftKey	返回是否同时按下了 Shift 键
altKey	返回是否同时按下了 Alt 键
metaKey	返回是否同时按下了 Meta 键（Windows 键）

DragEvent 类

拖拉事件 - JavaScript 教程 - 网道 (wangdoc.com)open in new window

图片、链接、选中的文字默认可拖拉，元素节点默认不可拖拉，可通过修改节点对象的 draggable 属性的布尔值来决定是否可拖拉。当为可拖拉时，就无法再用鼠标选中该节点内部的文字或子节点了。

1. 事件类型

（1）被拖拉的节点上触发

drag：拖拉中（持续触发，相隔几百毫秒）
dragstart：拖拉开始
dragend：拖拉结束

（2）拖拉到达的目标节点上触发

dragenter：拖拉进入目标节点
dragover：拖拉到目标节点上方（持续触发，相隔几百毫秒）
dragleave：拖拉离开目标节点
drop：释放到目标节点

注意

按 ESC 键取消拖拉，不会触发 drop 事件；
释放鼠标（不管是否跨窗口），按 ESC 键取消拖拉，总是会触发 dragend 事件；
拖拉过程中，mousemove 事件不会触发；

2. 创建对象

拖拉行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new DragEvent("事件类型", {
	..., // MouseEvent 参数
    dataTransfer: null, // 携带数据的 DataTransfer 对象   
});

3. 原型属性

原型属性	描述
dataTransfer	返回携带数据的 DataTransfer 对象

DataTransfer 类

1. 创建对象

拖拉行为创建
剪贴板行为创建
脚本创建

var dataTrans = new DataTransfer();

2. 原型属性

原型属性	描述
dropEffect	设置/查看目标节点允许的拖拉效果，只在 dragover 事件中设置有效 copy：复制 move：移动 link：链接 none：禁止（默认）
effectAllowed	设置/查看被拖拉节点允许的拖拉效果，只在 dragstart 事件中设置有效 copy：复制 move：移动 link：链接 copyLink：复制，链接 copyMove：复制，移动 linkMove：链接，移动 all：复制，移动，链接 uninitialized：同 all（默认） none：禁止
files	返回被拖拉文件成员的 FileList 对象，不涉及文件时为 null
types	返回被拖拉成员的数据格式（MIME 字符串）的数组
items	返回被拖拉成员的 DataTransferItemList 对象

注意

目标节点默认不允许 drop 事件，触发 drop 的条件如下：

在 dragover 中执行 event.preventDefault();
effectAllowed 不能为 none；
dropEffect 可以不设置，当有设置时，需要和 effectAllowed 对应一致；

3. 原型方法

原型方法	描述
setData(type, data)	设置拖拉事件所带有的数据，无则添加，有则替换
getData(type)	返回拖拉事件所带的指定类型的数据
clearData([type])	移除拖拉事件所带的指定类型的数据，无指定类型则移除全部数据（该方法不会移除被拖拉的文件，且只能在 dragstart 事件中监听）
setDragImage(image, x, y)	自定义拖拉过程中跟随鼠标移动的图片（默认是被拖拉节点的外观）

DataTransferItemList 类

1. 原型属性

原型属性	描述
length	成员数量

2. 原型方法

原型方法	描述
add(data, type) add(file)	增加一个指定内容和类型作为成员增加一个文件作为成员
remove(index)	移除指定位置的成员
clear()	移除指定位置的成员

DataTransferItem 类

1. 原型属性

原型属性	描述
kind	返回成员的种类：string，file
type	返回成员的类型（MIME 字符串）

2. 原型方法

原型方法	描述
getAsFile()	如果是文件，则返回该文件，否则返回 null
getAsString(callback)	如果被拖拉的是字符串，将该字符传入指定的回调函数处理

BeforeUnloadEvent 类

1. 事件类型

beforeunload：资源卸载前

（触发对象：window，img，link，script 等资源相关对象）

2. 原型属性

原型属性	描述
returnValue	未非空字符串时，浏览器会弹出对话框询问是否卸载该资源（实测无效）

PageTransitionEvent 类

1. 事件类型

pageshow：页面加载完成
pagehide：页面卸载时

（触发对象：window 对象）

注意

pageshow / pagehide 与 load / unload 区别

pageshow 在 load 之后，从缓存加载时 load 不触发
定义 unload 监听函数后，页面不会保存在缓存中
如果 pagehide 设置了要缓存则 unload 无效，设置了不缓存则 unload 才会在 pagehide 之后立即执行

2. 原型属性

原型属性	描述
persisted	pageshow 事件：true 页面来自缓存，false 页面初次加载（只读） pagehide 事件：true 页面保存至缓存，false 页面不保存至缓存

PopStateEvent 类

1. 事件类型

popstate：history 记录切换时触发（点击“后退/前进”按钮切换，或调用history.back()、history.forward()、history.go()）

（触发对象：window 对象）

2. 原型属性

原型属性	描述
state	返回 history 的 pushState / replaceState 方法为当前记录添加的 state 对象

HashChangeEvent 类

1. 事件类型

hashchange：hash 变化时触发

（触发对象：window 对象）

2. 创建对象

hash变化行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new HashChangeEvent("事件类型", {
	..., // Event 参数
    oldURL: "", // 变化前 url
    newURL: "", // 变化后 url
});

3. 原型属性

原型属性	描述
oldURL	返回变化前 url
newURL	返回变化后 url

ClipboardEvent 类

1. 事件类型

cut：剪切
copy：复制
paste：粘贴

（触发对象：焦点所在的元素对象）

2. 原型属性

原型属性	描述
clipboardData	返回携带数据的 DataTransfer 对象

FocusEvent 类

1. 事件类型

focus：获得焦点后（不会冒泡）
blur：失去焦点后（不会冒泡）
focusin：将要获得焦点（在 focus 之前，会冒泡）
focusout：将要失去焦点（在 blur 之前，会冒泡）

（触发对象：可以获取焦点的元素对象）

2. 原型属性

原型属性	描述
relatedTarget	focusin 事件：返回将要失去焦点的元素对象 focusout 事件：返回将要获取焦点的元素对象 focus 和 blur 事件：返回 null

ProgressEvent 类

进度事件 - JavaScript 教程 - 网道 (wangdoc.com)open in new window

1. 事件类型

loadstart：加载开始
progress：加载中（持续触发）
load：加载成功
abort：加载中止，比如用户取消（当发生错误导致中止时不会触发）
error：加载错误
timeout：加载超时
loadend：加载结束（在 load，abort，error 等事件之后触发）

2. 创建对象

资源传输行为创建
如文件上传，AJAX 请求，资源加载等
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new ProgressEvent("事件类型", {
	..., // Event 参数
    lengthComputable: false, // 加载的总量是否可以计算
    loaded: 0, // 已经加载的量
    total: 0, // 需要加载的总量
});

注意

有时资源加载会在脚本运行之前就完成，尤其是脚本放在文档底部的时候，因此最好把事件监听函数写在节点 HTML 代码中，才能保证一定会执行。

3. 原型属性

原型属性	描述
lengthComputable	返回加载的总量是否可以计算
loaded	返回已经加载的量
total	返回需要加载的总量

StorageEvent 类

1. 事件类型

storage：当前窗口 localStorage 或 sessionStoage 的数据变化

（触发对象：window 对象）

注意

storage 事件在 Storage 数据发生变化的窗口不触发，只在其他同域窗口触发。

2. 创建对象

Storage 数据变化行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new StorageEvent("事件类型", {
	..., // Event 参数
    storageArea: null, // 被操作的 storage 对象
    key: null, // 被修改的键值
    newValue: null, // 被修改后的新值
    oldValue: null, // 被修改前的旧值
    url: null, // 触发变化的 URL
});

3. 原型属性

原型属性	描述
storageArea	返回被操作的 storage 对象
key	返回被修改的键值
newValue	返回被修改后的新值
oldValue	返回被修改前的旧值
url	返回触发变化的 URL

MessageEvent 类

1. 事件类型

message：接收消息

（触发对象：window 对象）

2. 创建对象

接收消息行为创建
脚本创建

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new StorageEvent("事件类型", {
	..., // Event 参数
    storageArea: null, // 被操作的 storage 对象
    key: null, // 被修改的键值
    newValue: null, // 被修改后的新值
    oldValue: null, // 被修改前的旧值
    url: null, // 触发变化的 URL
});

3. 原型属性

原型属性	描述
storageArea	返回被操作的 storage 对象
key	返回被修改的键值
newValue	返回被修改后的新值
oldValue	返回被修改前的旧值
url	返回触发变化的 URL

TransitionEvent 类

1. 事件类型

transitionstart：过渡开始
transitionend：过渡结束

TODO

AnimationEvent 类

1. 事件类型

animationstart：动画开始
animationend：动画结束

TODO

CustomEvent 类

自定义事件

1. 创建对象

// 参数1：事件类型
// 参数2：配置对象（可选）
var event = new CustomEvent("自定义事件类型", {
	..., // Event 参数
    detail: null, // 附带数据
});

2. 原型属性

原型属性	描述
detail	附带数据

事件对象

# EventTarget 类

# Event 类

# MouseEvent 类

# WheelEvent 类

# PointerEvent 类

# KeyboardEvent 类

# InputEvent 类

# Touch 类

# TouchList 类

# TouchEvent 类

# DragEvent 类

# DataTransfer 类

# DataTransferItemList 类

# DataTransferItem 类

# BeforeUnloadEvent 类

# PageTransitionEvent 类

# PopStateEvent 类

# HashChangeEvent 类

# ClipboardEvent 类

# FocusEvent 类

# ProgressEvent 类

# StorageEvent 类

# MessageEvent 类

# TransitionEvent 类

# AnimationEvent 类

# CustomEvent 类

ON THIS PAGE

EventTarget 类

Event 类

MouseEvent 类

WheelEvent 类

PointerEvent 类

KeyboardEvent 类

InputEvent 类

Touch 类

TouchList 类

TouchEvent 类

DragEvent 类

DataTransfer 类

DataTransferItemList 类

DataTransferItem 类

BeforeUnloadEvent 类

PageTransitionEvent 类

PopStateEvent 类

HashChangeEvent 类

ClipboardEvent 类

FocusEvent 类

ProgressEvent 类

StorageEvent 类

MessageEvent 类

TransitionEvent 类

AnimationEvent 类

CustomEvent 类