浅谈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 相关文章推荐
javascript加号"+"的二义性说明
Mar 04 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
ionic3 懒加载
Aug 16 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
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错误机制知识汇总
2016/03/24 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
12 种使用Vue 的最佳做法
2020/03/30 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python如何制作缩略图
2019/04/30 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python yield关键词案例测试
2019/10/15 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
学校卫生检查制度
2014/02/03 职场文书
商务英语专业求职信
2014/06/26 职场文书
火锅店的活动方案
2014/08/15 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
公司总经理岗位职责
2015/04/01 职场文书
领导干部学习心得体会
2016/01/23 职场文书
常用的Python代码调试工具总结
2021/06/23 Python