在 IE8 及更早版本中模拟事件的过程与 DOM 方式类似:创建 event 对象,指定相应信息,然后使用这个对象触发。当然,IE 实现每一步的方式都不一样。 首先,要使用 document 对象的 createEventObject()方法来创建 event 对象。与 DOM 不同,这个方法不接收参数,返回一个通用 event 对象。然后,可以手工给返回的对象指定希望该对象具备的所有属性。(没有初始化方法。)最后一步是在事件目标上调用 fireEvent()方法,这个方法接收两个参数:事件处理程序的名字和 event 对象。调用 fireEvent()时,srcElement 和 type 属性会自动指派到 event 对象(其他所有属性必须手工指定)。这意味着 IE 支持的所有事件都可以通过相同的 方式来模拟。例如,下面的代码在一个按钮上模拟了 click 事件:
// 创建 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 及更早版本不支持的属性。这些属性的值对于事件来说并不重要,因为只有事件处理程序才会使用它们。 同样的方式也可以用来模拟 keypress 事件,如下面的例子所示:
// 创建 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 虽然会触发,但文本框中也不会出现字符。 小结 事件是 JavaScript 与网页结合的主要方式。最常见的事件是在 DOM3 Events 规范或 HTML5 中定义的。虽然基本的事件都有规范定义,但很多浏览器在规范之外实现了自己专有的事件,以方便开发者更好地满足用户交互需求,其中一些专有事件直接与特殊的设备相关。 围绕着使用事件,需要考虑内存与性能问题。
例如: 最好限制一个页面中事件处理程序的数量,因为它们会占用过多内存,导致页面响应缓慢; 利用事件冒泡,事件委托可以解决限制事件处理程序数量的问题; 最好在页面卸载之前删除所有事件处理程序。 使用 JavaScript 也可以在浏览器中模拟事件。DOM2 Events 和 DOM3 Events 规范提供了模拟方法,可以模拟所有原生 DOM 事件。键盘事件一定程度上也是可以模拟的,有时候需要组合其他技术。IE8及更早版本也支持事件模拟,只是接口与 DOM 方式不同。 事件是 JavaScript 中最重要的主题之一,理解事件的原理及其对性能的影响非常重要。