要确定浏览器是否支持DOM规定的HTML事件,可以使用如下代码:
只有根据DOM2级事件实现这些事件的浏览器才返回true,以非标准方式支持这些事件的浏览器会返回false;
目前主流的浏览器(非IE)支持DOM2级创建的事件类型有:
1、UIEvents 一般化的UI事件
2、MouseEvents 一般化的鼠标事件
3、MutationEvents 一般化的DOM变动事件
4、HTMLEvents 一般化的HTML事件
以键盘事件为例,在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
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)中,需要采用如下的方式:
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;
检测当前浏览器是否支持这一类的事情,可以使用如下的方法判定:
document.implementation.hasFeature(“MutationEvents”, "2.0”)
前面讲述的是在非IE中的实现方案,IE中实现起来较为简单
鼠标事件MouseEvents,只需要统一使用document.createEvent(“MouseEvents”);需要使用initMouseEvent方法对事件进行初始化,参数由10个变为15个
type 事件类型(String),如“click”
cancelable 是否支持取消(Boolean)
view 与事件关联的视图
detail 与事件有关的详细信息
screenX 事件相对屏幕的X坐标
screenY 事件相对屏幕的Y坐标
clientX 事件相对视窗的X坐标
clientY 事件相对视窗的Y坐标
altKey 是否按下了Alt键(Boolean),默认为false
metaKey 是否按下了Meta键(Boolean),默认为false
button 按下的是鼠标的左/右/中键
relatedTarget 与事件相关的对象,只在模拟mouseover、mouseout时使用(对应IE中的fromElement、toElement)