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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

Reactjs 入门基础(三)

State 和 Props 以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state, 并通过在子组件上使用 pro...

2049
来自专栏九彩拼盘的叨叨叨

学习前端 第6周 第1天

711
来自专栏何俊林

OpenGL中 Canvas 性能分析

本文将通过分析部分源码,描述 Android 里面的 Canvas 的大致实现。并且会对 Canvas 的性能做一定分析,提供对 Canvas 的使用建议。

3383
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

2933
来自专栏xx_Cc的学习总结专栏

iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

5706
来自专栏Nian糕的私人厨房

CSS 消除 inline-block 元素间的间隙

从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符...

1184
来自专栏HTML5学堂

点击块,让小块动起来 - 函数封装

上一期我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式,它是实现页面交互效果的重要基础知识。如果想具体了解JS设置标签的内容和样式,可以回复“标...

32212
来自专栏布尔

select元素的options.add 与 insertbefore的区别

之前提到如果想改变元素的视觉效果(checkbox.checked=true会打钩),请在把元素添加到页面上再为其赋值,否则赋值无效。下拉框元素也有这样的问题,...

2107
来自专栏编程

前端学习自学笔记:day03

嗯,说实话,我写这个的话比较少人看啊,但是还是继续坚持下去吧,可不可能半途而废啊,接下来是第三天的笔记. ? 在此之前先为大家显示下前端工程师的路线图: 第三天...

1985
来自专栏阮一峰的网络日志

如何做到 jQuery-free?

jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使...

3194

扫码关注云+社区

领取腾讯云代金券