浅谈Javascript事件模拟


Posted in Javascript onJune 27, 2012

这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序。这种能力在测试web应用程序的时候,是非常有用的,在DOM 3级规范中提供了方法来模拟特定的事件,IE9 chrome FF Opera 和 Safari都支持这样的方式,在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件
a)Dom 事件模拟

可以通过document上的createEvent()方法,在任何时候创建事件对象,此方法只接受一个参数,既要创建事件对象的事件字符串,在DOM2 级规范上所有的字符串都是复数形式,在DOM 3级事件上所有的字符串都采用单数形式,所有的字符串如下:

UIEvents:通用的UI 事件,鼠标事件键盘事件都是继承自UI事件,在DOM 3 级上使用的是 UIEvent。

MouseEvents:通用的鼠标事件,在DOM 3 级上使用的是 MouseEvent。

MutationEvents:通用的突变事件,在DOM 3 级上使用的是 MutationEvent。

HTMLEvents:通用的HTML事件,在DOM3级上还没有等效的。
注意,ie9是唯一支持DOM3级键盘事件的浏览器,但其他浏览器也提供了其他可用的方法来模拟键盘事件。
一旦创建了一个事件对象,就要初始化这个事件的相关信息,每一种类型的事件都有特定的方法来初始化,在创建完事件对象之后,通过dispatchEvent()方法来将事件应用到特定的dom节点上,以便其支持该事件。这个dispatchEvent()事件,支持一个参数,就是你创建的event对象。
b)鼠标事件模拟

鼠标事件可以通过创建一个鼠标事件对象来模拟(mouse event object),并且授予他一些相关信息,创建一个鼠标事件通过传给createEvent()方法一个字符串"MouseEvents",来创建鼠标事件对象,之后通过iniMouseEvent()方法来初始化返回的事件对象,iniMouseEvent()方法接受15参数,参数如下:

type string类型 :要触发的事件类型,例如‘click'。

bubbles Boolean类型:表示事件是否应该冒泡,针对鼠标事件模拟,该值应该被设置为true。

cancelable bool类型:表示该事件是否能够被取消,针对鼠标事件模拟,该值应该被设置为true。

view 抽象视图:事件授予的视图,这个值几乎全是document.defaultView.

detail int类型:附加的事件信息这个初始化时一般应该默认为0。

screenX int类型 : 事件距离屏幕左边的X坐标

screenY int类型 : 事件距离屏幕上边的y坐标

clientX int类型 : 事件距离可视区域左边的X坐标

clientY int类型 : 事件距离可视区域上边的y坐标

ctrlKey Boolean类型 : 代表ctrol键是否被按下,默认为false。

altKey Boolean类型 : 代表alt键是否被按下,默认为false。

shiftKey Boolean类型 : 代表shif键是否被按下,默认为false。

metaKey Boolean类型: 代表meta key 是否被按下,默认是false。

button int类型: 表示被按下的鼠标键,默认是零.

relatedTarget (object) : 事件的关联对象.只有在模拟mouseover 和 mouseout时用到。

值得注意的是,initMouseEvent()的参数直接与event对象相映射,其中前四个参数是由浏览器用到,只有事件处理函数用到其他的参数,当事件对象作为参数传给dispatch()方式,target属性将会自动被赋上值。下面是一个例子,

var btn = document.getElementById("myBtn"); 

var event = document.createEvent("MouseEvents"); 

event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null); 

btn.dispatchEvent(event);

在DOM实现的浏览器中,所有其他的事件都包括dbclick,都可以通过相同的方式来实现。
c)键盘事件模拟

值得注意的是键盘事件已经从DOM2级事件中移出了,起初在DOM2级事件的草案版中,键盘事件是作为草案的一部分的,但在最终版被移出了,FF已经实现了草案版中的键盘事件,值得注意的是在DOM3级事件中实现的键盘事件与DOM2级事件草案版中的键盘事件还是存在很大差异的。
在dom3级事件中创建一个键盘事件对象是通过createEvent()方法,并传入KeyBoardEvent字符串作为参数,对返回的event对象,调用initKeyBoadEvent()方法初始化,初始化键盘事件的参数有以下几个:

type (string) - 要触发的事件类型,例如"keydown".

bubbles (Boolean) — 代表事件是否应该冒泡.

cancelable (Boolean) — 代表事件是否可以被取消.

view (AbstractView) — 被授予事件的是图. 通常值为:document.defaultView.

key (string) — 按下的键对应的code.

location (integer) — 按下键所在的位置. 0 :默认键盘, 1 左侧位置, 2 右侧位置, 3 数字键盘区, 4 虚拟键盘区, or 5 游戏手柄.

modifiers (string) — 一个有空格分开的修饰符列表.

repeat (integer) — 一行中某个键被按下的次数.
请注意的是,在DOM3事件中,费掉了keypress事件,因此按照下面的方式,你只能模拟键盘上的keydown 和 keyup事件。

var textbox = document.getElementById("myTextbox"),event; 


if (document.implementation.hasFeature("KeyboardEvents", "3.0")){ 



event = document.createEvent("KeyboardEvent"); 



event.initKeyboardEvent("keydown", true, true, document.defaultView, "a",0, "Shift", 0); 


} 


textbox.dispatchEvent(event);

在FF下,允许你通过使用document.createEvent('KeyEvents'),这种方式来创建键盘事件,初始化的方法为initKeyEvent(),这个方法接受10个参数,

type (string) — 要触发的事件类型,例如"keydown".

bubbles (Boolean) — 代表事件是否应该冒泡.

cancelable (Boolean) — 代表事件是否可以被取消.

view (AbstractView) — 被授予事件的是图. 通常值为:document.defaultView.

ctrlKey (Boolean) — 代表ctrol键是否按下. 默认 false.

altKey (Boolean) — 代表alt键是否按下. 默认 false.

shiftKey (Boolean) — 代表shift键是否按下. 默认 false.

metaKey (Boolean) — 代表meta键是否按下. 默认 false.

keyCode (integer) — 键按下或释放时键所对应的键码. 默认是0;

charCode (integer) — 按下的键的字符所对应的ASCII code.是共keypress事件使用的 默认是0.
D)模拟其他事件
鼠标事件和键盘事件是在浏览器中最长被模拟的事件,,但是某些时候同样需要模拟突变事件和HTML事件。可以用createEvent('MutationEvents'),来创建一个突变事件对象,可以采用initMutationEvent()来初始化这个事件对象,参数包括type, bubbles, cancelable, relatedNode, prevValue,
newValue, attrName, 和attrChange.可以采用下面的方式来模拟一个突变事件:

var event = document.createEvent('MutationEvents');

event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","","",0);

target.dispatchEvent(event);
对于HTML事件,直接上代码。

var event = document.createEvent("HTMLEvents");

event.initEvent("focus", true, false);

target.dispatchEvent(event);
对于突变事件和HTML事件是很少在浏览器中用到,因为他们收应用程序的限制。
E)定制DOM事件
在DOM3级事件中定义了一类事件称之为 custom event,我称之为客户事件,客户事件不会原生的被dom触发,而是直接提供,以至于开发者可以创建他们自己的事件,你可以创建一个自己的客户事件,通过调用createEvent('CustomEvent'),对返回的事件对象调用,initCustomEvent()方法,其中传递四个参数type,bubbles,cancelable,detail。ps:小弟对这部分理解有限,在这里只是抛砖引玉。
F)IE中的事件模拟
从IE8,以及更早版本的IE,都在模仿DOM模拟事件的方式:创建事件对象,初始化事件信息,之后触发事件。当然IE在完成这几个步骤的过程是不同的。
首先不同于dom中创建event对象的方法,IE采用document.createEventObject()方法,并且没有参数,返回一个通用的事件对象,接下来要对返回的event对象赋值,此时ie并没有提供初始化函数,你只能采用物理方法一个一个的赋值,最后在目标元素上调用fireEvent()方法,参数为两个:事件处理的名称和创建的事件对象。当fireEvent方法被调用的时候,event对象的srcElement和type属性将会被自动赋值,其他将需要手动赋值。请看下面的例子:

var btn = document.getElementById("myBtn"); 

var event = document.createEventObject(); 

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 handler)会用到他们。对于创建鼠标事件、键盘事件还是其他事件的事件对象之间是没有区别的,因为一个通用的事件对象,可以被任何类型的事件触发。

值得注意的是,在Dom的键盘事件模拟中,对于一个keypress模拟事件的结果不会作为字符出现在textbox中,即使对应的事件处理函数已经触发。

与DOM事件模拟相比,个人觉得IE的事件模拟更容易让人记忆和接受,统一的事件模型可以带来一些便捷。

Javascript 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
微信小程序实现图片上传
May 23 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JS时间选择器 兼容IE6,7,8,9
Jun 26 #Javascript
基于jquery & json的省市区联动代码
Jun 26 #Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 #Javascript
Jvascript学习实践案例(开发常用)
Jun 25 #Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 #Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 #Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 #Javascript
You might like
PHP调用三种数据库的方法(3)
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
PHP源码之explode使用说明
2011/08/05 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
js实现文字截断功能
2016/09/14 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
JS实现滑动插件
2020/01/15 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
会计助理的岗位职责
2013/11/29 职场文书
运动会入场词60字
2014/02/15 职场文书
初中中等生评语
2014/12/29 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
常用的Python代码调试工具总结
2021/06/23 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript