33-JavaScript高级程序设计-性能&模拟事件

一、内存和性能

性能问题：在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。
原因：多方面的（1）每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。（2）必须事先指定所有事件处理程序而导致的 DOM 访问次数，会延迟整个页面的交互就绪时间。

1. 事件委托

对“事件处理程序过多”问题的解决方案就是事件委托。
事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

document 对象事件委托的优点：

1. document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序（无需等待 DOMContentLoaded 或 load 事件）。
2. 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的 DOM引用更少，所花的时间也更少。
3. 整个页面占用的内存空间更少，能够提升整体性能。

最适合采用事件委托的事件：click、mousedown、mouseup、keydown、keyup 和 keypress。

2. 移除事件处理程序

内存中留有那些过时不用的“空事件处理程序”（dangling event handler），也是造成 Web 应用程序内存与性能问题的主要原因。

产生原因：
从文档中移除带有事件处理程序的元素时。
卸载页面时。

解决方案：
设置 innerHTML 属性之前，先移除元素的事件处理程序。（也可事件委托）
在页面卸载之前，先通过 onunload 事件处理程序移除所有事件处理程序。

二、模拟事件

可以使用 JavaScript 在任意时刻来触发特定的事件，而此时的事件就如同浏览器创建的事件一样。
在测试 Web 应用程序，模拟触发事件是一种极其有用的技术。

1. DOM中的事件模拟

document.createEvent()：创建 event 对象。接收一个参数，表示要创建的事件类型的字符串。
UIEvents：一般化的 UI 事件。鼠标事件和键盘事件都继承自 UI 事件。DOM3 级中是 UIEvent 。
MouseEvents：一般化的鼠标事件。DOM3 级中是 MouseEvent 。
MutationEvents：一般化的 DOM 变动事件。DOM3 级中是 MutationEvent 。
HTMLEvents：一般化的 HTML 事件。没有对应的 DOM3 级事件（HTML 事件被分散到其他类别中）。

初始化：在创建了 event 对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的 event 对象都有一个特殊的方法，为它传入适当的数据就可以初始化该 event 对象。

触发事件：调用 dispatchEvent() 方法。接收一个参数，表示要触发事件的 event 对象。触发事件之后，能够照样冒泡并引发相应事件处理程序的执行。

模拟鼠标事件

创建鼠标事件对象的方法是为 createEvent() 传入字符串 “MouseEvents” 。
返回的对象有一个名为 initMouseEvent() 方法，用于指定与该鼠标事件有关的信息。这个方法接收 15 个参数，分别与鼠标事件中每个典型的属性一一对应。
type、bubbles、cancelable、view、detail、screenX、screenY、clientX、clientY、ctrlKey、altKey、shiftKey、metaKey、button、relatedTarget。

//创建事件对象
var event = document.createEvent("MouseEvents");
//初始化事件对象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
//触发事件
btn.dispatchEvent(event);

模拟键盘事件

DOM3 级规定，调用 createEvent() 并传入 “KeyboardEvent” 就可以创建一个键盘事件。
返回的事件对象会包含一个 initKeyEvent() 方法，这个方法接收 8 个参数：type、bubbles、cancelable、view、key、location、modifiers、repeat。

//以 DOM3 级方式创建事件对象
if (document.implementation.hasFeature("KeyboardEvents", "3.0")){
  event = document.createEvent("KeyboardEvent");
  //初始化事件对象
  event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0);
}
//触发事件
textbox.dispatchEvent(event);

在 Firefox 中，调用 createEvent() 并传入 “KeyEvents” 就可以创建一个键盘事件。
返回的事件对象会包含一个 initKeyEvent() 方法，这个方法接收 10 个参数：type、bubbles、cancelable、view、ctrlKey、altKey、shiftKey、metaKey、keyCode、charCode。

//只适用于 Firefox
// 创建事件对象
var event = document.createEvent("KeyEvents");
// 初始化事件对象
event.initKeyEvent("keypress", true, true, document.defaultView, false, false, false, false, 65, 65);
//触发事件
textbox.dispatchEvent(event);

在其他浏览器中，需要创建一个通用的事件，然后再向事件对象中添加键盘事件特有的信息。

// 创建事件对象
var event = document.createEvent("Events");
// 初始化事件对象
event.initEvent(type, bubbles, cancelable);
event.view = document.defaultView;
event.altKey = false;
event.ctrlKey = false;
event.shiftKey = false;
event.metaKey = false;
event.keyCode = 65;
event.charCode = 65;
//触发事件
textbox.dispatchEvent(event);

模拟其他事件

模拟变动事件，可以使用 createEvent(“MutationEvents”) 创建一个包含 initMutationEvent() 方法的变动事件对象。这个方法接受的参数包括：type、bubbles、cancelable、relatedNode、preValue、newValue、attrName 和 attrChange。

var event = document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","","",0);
target.dispatchEvent(event);

模拟 HTML 事件，通过 createEvent(“HTMLEvents”) 创建一个 event 对象，然后使用这个对象的 initEvent() 方法来初始化。

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

自定义 DOM 事件

创建新的自定义事件，可以调用 createEvent(“CustomEvent”) 。返回的对象有一个名为 initCustomEvent() 的方法，接收 4 个参数：type、bubbles、cancelable、detail。

if (document.implementation.hasFeature("CustomEvents", "3.0")){
  event = document.createEvent("CustomEvent");
  event.initCustomEvent("myevent", true, false, "Hello world!");
  div.dispatchEvent(event);
}

2. IE中的事件模拟

IE8 及之前版本模拟事件，思路类似 DOM：先创建 event 对象，然后为其指定相应的信息，然后再使用该对象来触发事件。

调用 document.createEventObject() 方法可以在 IE 中创建 event 对象。但与 DOM方式不同的是，这个方法不接受参数，结果会返回一个通用的 event 对象。
然后必须手工为这个对象添加所有必要的信息（没有方法来辅助完成这一步骤）。
最后一步就是在目标上调用 fireEvent() 方法，这个方法接受两个参数：事件处理程序的名称和 event 对象。在调用 fireEvent() 方法时，会自动为 event 对象添加 srcElement 和 type 属性；其他属性则都是必须通过手工添加的。

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

---

上一篇：32-JavaScript高级程序设计-事件类型(下)
下一篇：34-JavaScript高级程序设计-表单基础知识

全书整理版：《Javascript高级程序设计》第3版（总结版）

---