DOM的事件模拟（摘）

要确定浏览器是否支持DOM规定的HTML事件，可以使用如下代码：

var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0");

 

只有根据DOM2级事件实现这些事件的浏览器才返回true，以非标准方式支持这些事件的浏览器会返回false;

 

关于document.implementation的其它方法以及它们各自的返回值，可以查看MDN上的说明>>

 

目前主流的浏览器(非IE)支持DOM2级创建的事件类型有：

1、UIEvents     一般化的UI事件

2、MouseEvents  一般化的鼠标事件

3、MutationEvents  一般化的DOM变动事件

4、HTMLEvents  一般化的HTML事件

DOM3增加了文件事件TextEvent/TextEvents(Gecko)、键盘事件KeyboardEvent/KeyEvents(Gecko)，更多详情参考MDN document.createEvent

 

以键盘事件为例，在FireFox中调用createEvent方法并传入KeyEvents创建键盘事件对象，然后调用initKeyEvent方法初始化事件，最后使用dispatchEvent来触发事件，实际开发中需要兼容各浏览器，所以在一般先创建一个通用的事件对象：document.createEvent(“Events”)，然后调用initEvent进行事件的初始化

 

Firefox浏览器(Gecko引擎)中初始化事件的方法initKeyEvent方法接收10个参数：

type 要触发的事件类型（String），如keypress、keydown

bubbles 是否冒泡(Boolean)

cancelable 是否可以取消该事件(Boolean)

view  与事件相关的视图

ctrlKey 是否按下Ctrl键(Boolean)，默认为false

shiftKey 是否按下了Shift键(Boolean)，默认为false

metaKey 是否按下了Meta键(Boolean)，默认为false  关于meta键查了一下“通常用Alt键或Windows键仿真”？

keyCode 按下或释放的键的键码，对应keydown、keyup是有用的，默认值为0

charCode 通过按键生成的字符的ASCII编码，这个参数对keypress有用，默认为0

ex:

var evt = document.createEvent(“KeyEvents”);

event.initKeyEvent(“keypress”, true, true, document.defaultView, false, false, false, false, 65, 65);

dom.dispatchEvent(evt);

 

其它浏览器（非IE）中，需要采用如下的方式：

ex:

var evt = document.createEvent(“Events”);

evt.initEvent(type, bubbles, cancelable);

evt.view = document.defaultView;

evt.altKey = false;

evt.ctrlKey = false;

evt.shiftKey = false;

evt.metaKey = false;

evt.keyCode = 65;

evt.charCode = 65;

dom.dispatchEvent(evt);

 

 

其它的事件类型，如：MutationEvents，可以模拟触发DOMNodeInserted等事件，可惜的是IE中完全不支持这一类的事件(其它浏览器只支持部分或是支持的并不好)。如果以后的浏览器都能较好的支持这一类事件，那么在处理iframe高度自适应方面就很容易解决，可以参考之前写过的文章“不使用定时器实现iframe的自适应高度”

 

检测当前浏览器是否支持这一类的事情，可以使用如下的方法判定：

document.implementation.hasFeature(“MutationEvents”, "2.0”)

 

前面讲述的是在非IE中的实现方案，IE中实现起来较为简单

var evt = document.createEventObject();

//初始化事件
evt.altKey = false;
evt.ctrlKey = false;
evt.shiftKey = false;
evt.keyCode = 65;

dom.fireEvent("onkeypress", evt);

鼠标事件MouseEvents，只需要统一使用document.createEvent(“MouseEvents”);需要使用initMouseEvent方法对事件进行初始化，参数由10个变为15个

type 事件类型（String），如“click”

bubbles 是否冒泡(Boolean)

cancelable 是否支持取消(Boolean)

view 与事件关联的视图

detail 与事件有关的详细信息

screenX 事件相对屏幕的X坐标

screenY 事件相对屏幕的Y坐标

clientX 事件相对视窗的X坐标

clientY 事件相对视窗的Y坐标

ctrlKey 是否按下Ctrl键(Boolean)，默认为false

altKey 是否按下了Alt键(Boolean)，默认为false

metaKey 是否按下了Meta键(Boolean)，默认为false

button 按下的是鼠标的左/右/中键

relatedTarget 与事件相关的对象，只在模拟mouseover、mouseout时使用(对应IE中的fromElement、toElement)