DOM的事件模拟

简介: 要确定浏览器是否支持DOM规定的HTML事件,可以使用如下代码: var isSupported = document.implementation.hasFeature("HTMLEvents", "2.

要确定浏览器是否支持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)

相关文章
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
96 5
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
37 5
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
47 0
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
61 0
|
10月前
|
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
55 0
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
68 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等