当前位置: 首页 > 编程日记 > 正文

浅谈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()方法初始化,初始化键盘事件的参数有以下几个:
  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的事件模拟更容易让人记忆和接受,统一的事件模型可以带来一些便捷。

转载于:https://www.cnblogs.com/dongzhiquan/archive/2012/06/26/2564518.html

相关文章:

程序员成熟的几个标志

转载自:http://blog.csdn.net/linux_loajie/article/details/7698551 程序员成熟的标志 程序员在经历了若干年编程工作之后,很想知道自己水平到底如何?自己是否已经成为成熟的程序员?虽然程序员会对自己有一个自我评价&#xff0c…

云平台屡次停摆,核心系统事故频发?您的运维系统该升级了!

3月3日凌晨,阿里云出现宕机故障,受宕机故障影响,华北不少互联网公司 APP、网站纷纷瘫痪,一大波程序员、运营和运维不得不从被窝里爬起来干活。网友“上海蓝盟网络夏立成”调侃,“阿里云一年一宕机,今年特别…

yii1框架,事务使用方法

Yii1框架事务操作方法如下: $transaction Yii::app()->db->beginTransaction();//创建事务 $transaction->commit();//提交事务 $transaction->rollback();//回滚事务下面使用try,throw,catch配合使用事务: 1 // 以下…

竖直菜单 html,jQuery实现的网页竖向菜单效果代码

本文实例讲述了jQuery实现的网页竖向菜单效果代码。分享给大家供大家参考。具体如下:这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的那种管理菜单。jquery加入后方便…

可以检验计算机配置的游戏软件,检测游戏配置的软件-有没有自己检验电脑配置是否符合游戏要求配置 – 手机爱问...

2018-03-28电脑配置是否够好如果楼主你这个配制已经配了的话就没什么好说的了 如果你没配 今天是别人给你写的话 那就千万别配 因为根本是一套垃圾东西 给你介绍一套 CPU:5200 够了 主板:七彩红 770 370 比华硕M2N68 400 NF芯片的划算 还可以组成3A平台 …

Linux实战教学笔记32:企业级Memcached服务应用实践

一, Memcached介绍 1.1 Memcached与常见同类软件对比 (1)Memcached是什么? Memcached是一个开源的,支持高性能,高并发的分布式内存缓存系统,由C语言编写,总共2000多行代码。从软件名…

嵌入式开发入门(2)

开发平台和硬件设备。我给的只是一种入门知识,具体如何应用请自助思考。所以请不要想着和我搭建同样的硬件平台。你要学习的是入门知识,换个芯片你一样可以这样做。 Ps:如果你想搭建试验平台直接买STM32F103的开发板,淘宝一把一把…

计算机四级网络工程题库,2016计算机四级网络工程师题库

2016计算机四级网络工程师题库一、选择题1、 以下关于OSPF协议技术特征的描述中,哪个是错误的?A.OSPF协议使用层次结构的区域划分B.它将一个自治系统内部划分成若干区域与主干区域(backbone area.C.主干区域连接多个区域,主干区域内部的路由器叫做主干路…

英语计算机作文初中.,初中英语作文:电脑游戏

Computer Games电脑游戏Computer games is a hot topic nowadays. Some people hold that it is bad. And others hold that it is good. In my view, whether good or bad is determined by the players.现在,电脑游戏是一个非常火的话题。一些人认为电脑游戏是不好…

计算机英语缩写AGP,IT行业常用计算机缩略语

IT行业常用计算机缩略语导语:信息技术缩写为IT,是主要用于管理和处理信息所采用的各种技术的总称。下面是YJBYS小编收集整理的IT行业常用计算机缩略语,希望对你有帮助!ADC     Analog-to-Digital Conventer      模数转换器ADO  …

山东计算机类好的民办大学,山东四大坑人学校-山东坑人的民办大学(野鸡大学)...

选择科目测一测我能上哪些大学选择科目领取你的专属报告>选择省份关闭请选择科目确定v>山东省作为高考大省,每年考生的竞争力很大,因此在选择院校的时候更需要考虑清楚。坊间传闻,“山东十大垃圾大学”是非常坑人的,那么山东…

java中数组的一些笔记

数组(相同数据类型的集合):是引用数据类型,数组的中的每个元素相当于数组的成员变量int [] num/ int num[]int nums [] new int [5];//创建了数组的对象并且指定了数组的长度。数组的长度一旦指定就不能更改index 下标 索引 从零…

计算机组成 试题,计算机组成典型试题及答案

计算机组成典型试题及答案计算机组成的任务是在指令集系统结构确定分配给硬件系统的功能和概念结构之后,研究各组成部分的内部构造和相互联系,那么计算机组成原理考试考什么呢?下面yjbys小编为大家分析计算机组成原理典型试题及答案如下:1.在计算机内部…

15-11-23:system指令

CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本、文件系统版本) 1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr.msc:证书管理实用程序 4. c…

J2EE的13种核心技术规范

J2EE主要用于创建可扩展的企业应用,包括13种核心技术规范: 1. JDBC(Java Database Connectivity,Java数据库连接) JDBC以一种统一的方式对各种各样的数据库进行存取,JDBC定义了4中不同的驱动程序&#xff1…

计算机教师简介50字,教师风采个人简介50字数.docx

教师个人简介 50 字大全例一:大家好,我叫王力央。今年 12 岁了,我有很多的兴趣比如:跳绳、游泳、看书、写字和玩耍。我 喜欢的东西也很多:水果、蔬菜、大螃蟹、大龙虾。大家要多吃蔬菜少吃油炸食品身体才能强壮、健康。…

visio 画类图时 方法里如何加参数

鼠标双击类(打开属性对话框)-->(类别)操作-->属性-->(类别)参数-->(添加参数)转载于:https://www.cnblogs.com/azhqiang/p/4991907.html

获取应用程序路径信息

//应用程序的可执行文件的路径 string apppath Application.ExecutablePath; //指定路径字符串的父目录信息,即当前目录的上一级目录 string str Path.GetDirectoryName(apppath); //指定路径字符串的扩展名 string …

jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载

转载自&#xff1a;老驴的博客 jQuery脚本&#xff1a; 1 <script type"text/javascript">2 $(function() {3 var scrollDiv document.createElement(div);4 $(scrollDiv).attr(id, toTop).html(^ 返回顶部).appendTo(body);…

海思涵科技WIFI认证服务器不在线,在海思平台外加一个usb wifi模块,mt7601 加载ok,配置网络ok,但不能ping通?...

请教下&#xff1a;我用mt7601 usb wifi模块加载驱动 配置网络后经常打印PeerBeaconAtJoinAction(): Set CentralChannel1PeerBeaconAtJoinAction(): HT-CtrlChannel5, CentralChannel>5PeerBeaconAtJoinAction(): Set CentralChannel5PeerBeaconAtJoinAction(): HT-CtrlCha…

关于ognl+struts-tag与el+jstl互相代替,以及el和jstl的学习笔记

昨晚在晚上看了许多文章&#xff0c;众多大牛说OGNL性能不行云云&#xff0c;乍一看似乎惨不忍睹&#xff0c;如下图&#xff1a; 于是考虑是否能使用ELJSTL代替实现前台的标签。 以最近测试用的简单留言板的查看文章页面为例&#xff0c;以下皆省略getter&#xff0c;setter方…

六年级计算机word处理,六年级上信息技术教案Word大变身用Word制作网页河大版

《六年级上信息技术教案Word大变身用Word制作网页河大版》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《六年级上信息技术教案Word大变身用Word制作网页河大版(2页珍藏版)》请在人人文库网上搜索。1、第 1 课 Word 大变身用 Word 制作网页教学内容&#xff1a;教学目…

android4.4 添加快捷开关(以截屏为例)

A&#xff0c;frameworks\base\packages\SystemUI\res\values\config.xml 添加&#xff1a; <bool name"quick_settings_show_screenshot">true</bool> B&#xff0c;frameworks\base\packages\SystemUI\res\values\strings.xml 添加&#xff1a;<str…

两台ubuntu虚拟机环境下hadoop安装配置

http://blog.itpub.net/26978437/viewspace-730136/按照上几篇的内容&#xff0c;安装好两台ubuntu虚拟机之后&#xff0c;首先确定好哪台机子做namenode&#xff0c;哪台做datanode&#xff0c;打开终端,输入&#xff1a;$sudo vi /etc/hosts 在打开的文件中输入主机名和IP地址…

记录程序运行时间

long currentTimeMills()返回以毫秒为单位的当前时间 long nanoTime() 返回最准确的可用系统计时器的当前值&#xff0c;以毫微秒为单位. 测试某些代码执行的时间长度&#xff1a; long startTime System.nanoTime();// ... the code being measured ...long estimatedTime S…

绝对定位下margin的作用

以前一直对绝对定位下的margin作用很模糊&#xff0c;今天细看一下 不使用top,left&#xff0c;margin等 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdev…

战地1如何修改服务器地址,《战地1》服务器加入方法一览

《战地1》发布已经有一段时间了&#xff0c;今天小编要为大家带来的是玩家“黑肉佐罗”分享的《战地1》服务器加入方法一览&#xff0c;感兴趣的玩家赶紧一起来看看吧!战地风云系列正统续作战地1问世已经有几个礼拜了&#xff0c;游戏怎么样&#xff0c;我想也不用多说&#xf…

css如何设置dialog,css-dialog提示

内容不完善内容不完善内容不完善内容不完善内容不完善确定BackGround.jsimport styled from styled-components;const BackGround styled.divbackground-color: rgba(19, 21, 26, 0.6);opacity: 1;z-index: 1001;top: 0;left: 0;right: 0;bottom: 0;position: absolute;;expor…

1356服务器性能,Intel发布4款LGA1356插口服务器处理器

Intel发布了4款LGA 1356插口的处理器&#xff0c;它们分别是Xeon E5-2449L和E5-1410、Pentium 1403和1407。Xeon E5-2449L是一款8核16线程的处理器&#xff0c;20MB三级缓存&#xff0c;同时它还具有Xeon E5-2400系列最低的TDP&#xff0c;仅为50W&#xff0c;但为了达到这个功…

二分图匹配匈牙利算法DFS实现

1 /**\2 | 二分图匹配&#xff08;匈牙利算法DFS 实现&#xff09;3 | INIT: g[][]邻接矩阵;4 | CALL: res MaxMatch ();5 | 优点&#xff1a;实现简洁容易理解&#xff0c;适用于稠密图&#xff0c;DFS 找增广路快。6 | 找一条增广路的复杂度为O&#xff08;E &#…