事件之模拟事件

一  背景

有事件冒泡时，也会触发相应的事件处理程序。这种能力在测试 Web 应用时特别有用。

DOM3 规范指明了模拟特定类型事件的方式。IE8 及更早版本也有自己模拟事件的方式

二 类型

• DOM事件模拟
• IE事件模拟

三 DOM事件模拟

1、事件模拟过程：

   第一步：使用 document.createEvent()方法创建一个 event 对象

• 接收一个参数，此参数是一个表示要创建事件类型的字符串        

可用的字符串值  事件	定义
"UIEvents"（DOM3 中是"UIEvent"）	通用用户界面事件（鼠标事件和键盘事件都继承自这 个事件）
"MouseEvents"（DOM3 中是"MouseEvent"）	通用鼠标事件
"HTMLEvents"（DOM3 中没有）	通用 HTML 事件（HTML 事件已经分散到了其他事件大类中）

  第二步：需要使用事件相关的信息来初始化

   每种类型的 event 对象都有特定的方法，可以使用相应数据来完成初始化

  第三步：触发事件，要使用 dispatchEvent()方法

  这个方法存在于所有支持事件的 DOM 节点之上。dispatchEvent()方法接收一个参数，即表示要触发事件的 event 对象。调用 dispatchEvent()方法之后，事件就“转正”了，接着便冒泡并触发事件处理程序执行

2、模拟鼠标事件

定义：需要先创建一个新的鼠标 event 对象，然后再使用必要的信息对其进行初始化

过程：

第一步：要创建鼠标 event 对象，可以调用 createEvent()方法并传入"MouseEvents"参数

第二步：返回一 个 event 对象，这个对象有一个 initMouseEvent()方法，用于为新对象指定鼠标的特定信息

参数	属性
type（字符串）	要触发的事件类型，如"click"
bubbles（布尔值）	表示事件是否冒泡。为精确模拟鼠标事件，应该设置为 true
cancelable（布尔值）	表示事件是否可以取消。为精确模拟鼠标事件，应该设置为 true
view（AbstractView）	与事件关联的视图。基本上始终是 document.defaultView
detail（整数）	关于事件的额外信息。只被事件处理程序使用，通常为 0
screenX（整数）	事件相对于屏幕的 x 坐标
screenY（整数）	事件相对于屏幕的 y 坐标
clientX（整数）	事件相对于视口的 x 坐标
clientY（整数）	事件相对于视口的 y 坐标
ctrlkey（布尔值）	表示是否按下了 Ctrl 键。默认为 false。
altkey（布尔值）	表示是否按下了 Alt 键。默认为 false
shiftkey（布尔值）	表示是否按下了 Shift 键。默认为 false
metakey（布尔值）	表示是否按下了 Meta 键。默认为 false
button（整数）	表示按下了哪个按钮。默认为 0
relatedTarget（对象）	与事件相关的对象。只在模拟 mouseover 和 mouseout 时使用

第三步：event 对象的 target 属性会自动设置为调用 dispatchEvent()方法时传入的节点

//使用默认值模拟单击事件的例子：
let btn = document.getElementById("myBtn"); 
// 创建 event 对象
let event = document.createEvent("MouseEvents"); 
// 初始化 event 对象
event.initMouseEvent("click", true, true, document.defaultView, 
 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
// 触发事件
btn.dispatchEvent(event); 

//所有鼠标事件，包括 dblclick 都可以像这样在 DOM 合规的浏览器中模拟出来

3、模拟键盘事件

第一步：创建键盘事件的方式是给 createEvent()方法传入参数"KeyboardEvent"

第二步：返回一个 event 对象，这个对象有一个 initKeyboardEvent()方法

参数	属性
type（字符串）	要触发的事件类型，如"keydown"
bubbles（布尔值）	表示事件是否冒泡。为精确模拟键盘事件，应该设置为 true
cancelable（布尔值）	表示事件是否可以取消。为精确模拟键盘事件，应该设置为 true
view（AbstractView）	与事件关联的视图。基本上始终是 document.defaultView
key（字符串）	按下按键的字符串代码
location（整数）	按下按键的位置。0 表示默认键，1 表示左边，2 表示右边，3 表示数字键盘， 4 表示移动设备（虚拟键盘），5 表示游戏手柄
modifiers（字符串）	空格分隔的修饰键列表，如"Shift"
repeat（整数）	连续按了这个键多少次

// DOM3 Events 废弃了 keypress 事件，因此只能通过上述方式模拟 keydown 和 keyup 事件：
let textbox = document.getElementById("myTextbox"), 
 event; 
// 按照 DOM3 的方式创建 event 对象
if (document.implementation.hasFeature("KeyboardEvents", "3.0")) { 
 event = document.createEvent("KeyboardEvent"); 
 // 初始化 event 对象
 event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 
 0, "Shift", 0); 
} 
// 触发事件
textbox.dispatchEvent(event); 

// 这个例子模拟了同时按住 Shift 键和键盘上 A 键的 keydown 事件。在使用document.createEvent("KeyboardEvent")之前，最好检测一下浏览器对 DOM3 键盘事件的支持情况，其他浏览器会返回非标准的 KeyboardEvent 对象。

4、模拟其他事件

模拟 HTML 事件要调用 createEvent()方法并传入"HTMLEvents"，然后再使用返回对象的 initEvent()方法来初始化

let event = document.createEvent("HTMLEvents"); 
event.initEvent("focus", true, false); 
target.dispatchEvent(event); 

//这个例子模拟了在给定目标上触发 focus 事件。其他 HTML 事件也可以像这样来模拟

5、自定义DOM事件

第一步：要创建自定义事件，需要调用 createEvent("CustomEvent")

第二步：返回的对象包含 initCustomEvent()方法

参数	定义
type（字符串）	要触发的事件类型，如"myevent"
bubbles（布尔值）	表示事件是否冒泡
cancelable（布尔值）	表示事件是否可以取消
detail（对象）	任意值。作为 event 对象的 detail 属性

// 自定义事件可以像其他事件一样在 DOM 中派发，比如：
let div = document.getElementById("myDiv"), 
 event; 
div.addEventListener("myevent", (event) => { 
 console.log("DIV: " + event.detail); 
}); 
document.addEventListener("myevent", (event) => { 
 console.log("DOCUMENT: " + event.detail); 
}); 
if (document.implementation.hasFeature("CustomEvents", "3.0")) { 
 event = document.createEvent("CustomEvent"); 
 event.initCustomEvent("myevent", true, false, "Hello world!"); 
 div.dispatchEvent(event); 
} 

// 这个例子创建了一个名为"myevent"的冒泡事件。event 对象的 detail 属性就是一个简单的字符串，<div>元素和 document 都为这个事件注册了事件处理程序。因为使用 initCustomEvent()初始化时将事件指定为可以冒泡，所以浏览器会负责把事件冒泡到 document

四 IE事件模拟

1、模拟过程

• 创建 event 对象：要使用 document 对象的 createEventObject()方法来创建 event 对象
  • 这个方法不接收参数，返回一个通用 event 对象
• 指定相应信息：手工给返回的对象指定希望该对象具备 的所有属性
• 使用这个对象触发：在事件目标上调用 fireEvent()方法
  • 这个方法接收两个参数：事件处理程序的名字和 event 对象
  • 调用 fireEvent()时，srcElement 和 type 属性会自动指派到 event 对象

例子1：模拟click事件

// 这意味着 IE 支持的所有事件都可以通过相同的方式来模拟。例如，下面的代码在一个按钮上模拟了click 事件：
var btn = document.getElementById("myBtn"); 
// 创建 event 对象
var event = document.createEventObject(); 
/// 初始化 event 对象
event.screenX = 100; 
event.screenY = 0; 
event.clientX = 0; 
event.clientY = 0; 
event.ctrlKey = false; 
event.altKey = false; 
event.shiftKey = false; 
event.button = 0; 
// 触发事件
btn.fireEvent("onclick", event); 

// 这个例子先创建 event 对象，然后用相关信息对其进行了初始化。注意，这里可以指定任何属性，包括 IE8 及更早版本不支持的属性。这些属性的值对于事件来说并不重要，因为只有事件处理程序才会使用它们。

例子2：模拟keypress事件

var textbox = document.getElementById("myTextbox"); 
// 创建 event 对象
var event = document.createEventObject(); 
// 初始化 event 对象
event.altKey = false; 
event.ctrlKey = false; 
event.shiftKey = false; 
event.keyCode = 65; 
// 触发事件
textbox.fireEvent("onkeypress", event); 

// 由于鼠标事件、键盘事件或其他事件的 event 对象并没有区别，因此使用通用的 event 对象可以触发任何类型的事件。注意，与 DOM 方式模拟键盘事件一样，这里模拟的 keypress 虽然会触发，但文本框中也不会出现字符