在javascript编程中,事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的。

会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序。这种能力在测试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()方法初始化,初始化键盘事件的参数有以下几个: www.jquerycn.cn

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的事件模拟更容易让人记忆和接受,统一的事件模型可以带来一些便捷。

html 鼠标中键事件,Javascript事件模拟(鼠标事件、键盘事件)相关推荐

  1. Android 使用 sendevent 模拟鼠标和键盘事件

    Android 使用 sendevent 模拟鼠标和键盘事件 模拟原理是对驱动发送消息,就是linux里面的input子系统. 命令格式: sendevent /dev/input/eventX [t ...

  2. QTP模拟鼠标和键盘事件整理

    整理者:asoqa整理 1.鼠标事件 1.1 使用自带的Click方法 看QTP的帮助,每个对象都有自带的Click方法,通过其中第三个参数指定具体的鼠标事件 例如: Browser("Ne ...

  3. java鼠标事件获得键盘值_请问JAVA怎么模拟鼠标和键盘事件[200分]

    比如要求模拟鼠标在左下角的[开始]上点一下 多谢 | 看看java.awt.Robot这个类,可能对你有帮助 Class Robot This class is used to generate na ...

  4. python获取键盘事件_50-用Python监听鼠标和键盘事件

    PyHook是一个基于Python的"钩子"库,主要用于监听当前电脑上鼠标和键盘的事件.这个库依赖于另一个Python库PyWin32,如同名字所显示的,PyWin32只能运行在W ...

  5. php鼠标点击事件,javascript模拟鼠标点击事件的实例代码

    javascript触发模拟鼠标点击事件 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法. 一般 ...

  6. 2020.11.18第十三章 事件(事件处理程序;事件对象;事件类型:UI事件;焦点事件;鼠标与键盘事件 变动事件 模拟事件)

    事件处理程序 html事件处理程序(直接在html中书写script) <!-- //#### 事件处理程序 //html时间程序 可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 ...

  7. 总结Selenium WebDriver中一些鼠标和键盘事件的使用

    在使用 Selenium WebDriver 做自动化测试的时候,会经常模拟鼠标和键盘的一些行为.比如使用鼠标单击.双击.右击.拖拽等动作:或者键盘输入.快捷键使用.组合键使用等模拟键盘的操作.在 W ...

  8. HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  9. html5鼠标事件监听,HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  10. HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例

    演示html5 canvas鼠标事件,获取canvas对象上的鼠标坐标,演示键盘事件通过键盘控制canvas上对象移动. canvas对象支持所有的javascript的鼠标事件,包括鼠标点击(mou ...

最新文章

  1. Django视图之状态保持
  2. python语言使用什么语句实现上下文管理协议_Python 技巧探究:上下文管理器和with语句...
  3. 每日一皮:一个名字打败对手的经典案例...
  4. SQL 遍历父子关系表(二叉树)获得所有子节点 所有父节点
  5. c libxml2解析html,简单的libxml2 HTML解析示例,使用Objective-c,Xcode和HTMLparser.h
  6. ITK:清除四边网格
  7. 云栖专辑 | 阿里开发者们的第6个感悟:享受折磨
  8. 【中部武汉】理想离家并不遥远
  9. Vuex在项目中使用
  10. vue-cli4 无法访问static资源问题
  11. 手机压缩包删除有什么后果?
  12. ServerSideIncludeModule不是可识别的本机模块
  13. mysql随机取5条数据_【转】mysql实现随机获取几条数据的方法
  14. 用JavaScript简单编程——基础篇
  15. MySQL、SQLyog、navicat安装
  16. mrpt在win8.1 64bit + vs2013环境下的安装和编译
  17. uClinux 启动过程详细分析(一)
  18. ssb的matlab仿真,线性调制AM、DSB、SSB的MATLAB仿真代码
  19. 新iPhoneSE开卖市场预期不一?二手市场已降价转售
  20. CAN调谐器与SILICON调谐器(又称为铁壳调谐器和硅片调谐器)

热门文章

  1. 2021年场(厂)内专用机动车辆安全管理考试报名及场(厂)内专用机动车辆安全管理考试资料
  2. CPU密集型、数据密集型与IO密集型
  3. 转: php5.3.5 模块安装 (XAMPP)
  4. Explaindio Video Creator Platinum(简称EVC) 3.042 Windows中文白金版MG动画2D和3D动画解说动画手绘白板动画视频制作软件
  5. 在win10系统上安装一个winXP系统的虚拟机
  6. transformer模型原理
  7. python 循环遍历0-9,a-z
  8. vscode 文件名绿色,提示数字1
  9. 猜灯谜_全排列板子题(A 村的元宵节灯会上有一迷题: 请猜谜 × 请猜谜 = 请边赏灯边猜 小明想,一定是每个汉字代表一个数字,不同的汉字代表不同的数字。 请你用计算机按小明的思路算一下,然后)
  10. java excel 模板 替换_替换WORD/EXCEL模板文档中的内容并下载java