模拟事件

DOM 事件模拟

1. 使用 document.createEvent() 创建一个 event 对象，接受一个参数，表示要创建事件类型的字符串
   • UIEvents（DOM3 中是 UIEvent）：通用用户界面事件
   • MouseEvents（DOM3 中是 MouseEvent）：通用鼠标事件
   • HTMLEvents（DOM3 中没有）：通用 HTML 事件
2. 使用事件相关信息初始化 event 对象
3. 使用 element.dispatchEvent() 在一个 DOM 上触发事件，接受 event 对象作为参数

1. 模拟鼠标事件

• event 对象上有一个 initmouseEvent() 方法，接受 15 个参数，用于初始化鼠标信息

参数	说明
type:string	要触发的事件类型，如 click
bubbles:boolean	表示事件是否冒泡
cancelable:boolean	表示事件是否可以取消
view:Object	与事件关联的视图。基本上是 document.defaultView
detail:number	关于事件的额外信息，通常为 0
screenX:number	事件相对于屏幕的 x 坐标
screenY:number	事件相对于屏幕的 y 坐标
clientX:number	事件相对于视口的 x 坐标
clientY:number	事件相对于视口的 y 坐标
ctrlKey:boolean	是否按下 Ctrl 键，默认为 false
altKey:boolean	是否按下 Alt 键，默认为 false
shiftKey:boolean	是否按下 Shift 键，默认为 false
metaKey:boolean	是否按下 Meta 键，默认为 false
button:number	按下哪个按钮
relatedTarget:Object	与事件相关的对象。只在模拟 mouseover 和 mouseout 时使用

使用默认值模拟单机事件

const btn = document.getElementById('btn')

const event = document.createEvent('MouseEvents')
event.initMouseEvent('click', true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, 0, null)
btn.dispatchEvent(event)

2. 模拟键盘事件

• event 对象上有一个 initKeyboardEvent() 方法，接受 8 个参数，用于初始化键盘信息

参数	说明
type:string	要触发的事件类型，如 keydown
bubbles:boolean	表示事件是否冒泡
cancelable:boolean	表示事件是否可以取消
view:Object	与事件关联的视图。基本上是 document.defaultView
key:string	按下按键的字符串代码
location:number	按下按键的位置。0：默认值，1：左边，2：右边，3：数字键盘，4：移动设备，5：游戏手柄
modifiers:string	空格分隔的修饰键列表，如 Shift
repeat	连续按了这个键多少次

模拟输入 A

const textbox = document.getElementById('textbox')
let event

if (document.implementation.hasFeature('KeyboareEvents', '3.0')) {
    event = document.createEvent('KeyboardEvent')
    event.initKeyboardEvent('keydown', true, true, document.defaultView, 'a', 0, 'Shift', 0)
}

textbox.dispatchEvent(event)

DOM3 Events 废弃了 keypress 事件，因此只能用来模拟 keydown 和 keyup 事件

3. 模拟其他事件

如模拟焦点

const event = document.createEvent('HTMLEvents')
event.initEvent('focus', true, false)
target.dispatchEvent(event)

4. 自定义 DOM 事件

• event 对象上有一个 initCustomEvent() 方法，接受 4 个参数

参数	说明
type:string	要触发的事件类型，如 myevent
bubbles:boolean	表示事件是否冒泡
cancelable:boolean	表示事件是否可以取消
detail:object	任意值，作为 event 对象的 detail 属性

const div = document.getElementById('div')
let event

div.addEventListener('myevent', e => console.log(e.detail))

if (document.implementation.hasFeature('CustomEvents', '3.0')) {
    event = document.createEvent('CustomEvent')
    event.initCustomEvent('myevent', true, true, 'hello')
    div.dispatchEvent(event)
}

IE 事件模拟

1. 使用 document.createEventObject() 创建一个 event 对象，接受一个参数，表示要创建事件类型的字符串
2. 手工给 event 设置希望拥有的属性
3. 使用 element.fireEvent() 在一个 DOM 上触发事件，接受事件处理程序的名字和 event 对象作为参数

如模拟在一个按钮上 click

const btn = document.getElementById('btn'),
      event = document.createEventObject()

event.scrreenX = 100
event.scrreenY = 0
event.clientX = 0
event.clientY = 0
event.button = 0

btn.fireEvent('onclick', event)