事件,指的是网页中某个特定的交互时刻

一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发

但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件

这些事件和浏览器创建的事件一样,都可以冒泡,并且在其触发时运行事先指定给它的事件处理程序

在测试web程序的过程中这种模拟触发事件是一种极其有用的技术,为此DOM2级规范将其纳入规范

规范化了模拟事件的方式,这种DOM规范规定的模拟事件的技术手段也叫做DOM事件模拟

PS:模拟事件和自定义事件是有区别的,模拟事件指的是我们并不去真的触发浏览器中的事件,而是用代码去触发事件来模拟事件发生的情况。 而自定义事件不过是模拟事件中的一种罢了

DOM事件模拟

首先我们知道事件处理程序和一般的函数的区别就在于,事件处理程序的函数在事件触发时会传入一个 event 事件对象

那么要模拟事件首先就需要创建 event 事件对象

创建事件对象我们可以调用 document 上的 createEvent()方法创建 event 事件对象

该方法接收一个参数,用于表示要创建的事件的类型

在DOM2级规范中这些字符串都使用英文复数形式,而在DOM3中这些字符串都变成了单数形式

以DOM2级规范为例,该函数的参数可以是以下几个字符串之一:

  • UIEvents:一般的UI事件,鼠标事件和键盘事件都继承自UI事件
  • MouseEvents:一般的鼠标事件
  • MutationEvents:一般的DOM变动事件
  • HTMLEvents:一般的HTML事件(DOM3中没有对应的值,DOM3中HTML事件被拆分到了其它类别中)

在创建了 event 对象之后,还需使用与事件有关的信息才能对其进行初始化,对于不同类型的 event 对象有不同的方法来对其进行初始化(取决于createEvent()方法传入的参数)

初始化完成后,我们就只需要在代码中我们希望的位置触发即可

触发时我们需要在DOM元素上调用 dispatchEvent()方法(该方法得到所有能够触发事件的元素支持),此时需要传入我们之前创建的 event 对象作为该方法的参数

这样我们模拟的事件就像官方的事件那样能够冒泡,并且触发相应的事件处理程序了

模拟鼠标事件

创建新的鼠标事件并为其指定必要信息就可以模拟鼠标事件

这里需要详细讲的是初始化事件对象

我们在得到 createEvent 方法创建的 MouseEvent  事件对象后,该对象上有一个方法:

initMouseEvent()

该方法接收15个参数以此对应正常的浏览器事件中的鼠标事件的事件对象:

  1. type(字符串):表示触发鼠标事件的具体类型,如“click”
  2. bubbles(布尔值):表示该事件是否冒泡,为准确模拟鼠标事件应该为 true
  3. cancelable(布尔值):表示该事件是否可以取消,为准确模拟应为 true
  4. view(AbstractView):与事件关联的视图,应该设置为 document.defaultView
  5. detail(整数):与事件有关的详细信息,此处应该设为0
  6. screenX(整数):相对于屏幕的X坐标
  7. screenY(整数):相对于屏幕的Y坐标
  8. clientX(整数):相对于视口的X坐标
  9. clientY(整数):相对于视口的Y坐标
  10. ctrlKey(布尔值):表示是否按下ctrl,默认false
  11. altKey(布尔值):表示是否按下alt,默认false
  12. shiftKey(布尔值):表示是否按下shift键,默认false
  13. metaKey(布尔值):表示是否按下meta键,默认false
  14. button(整数):表示按下哪一个鼠标键
  15. relatedTarget(元素):表示与当前事件关联的元素对象,该参数只在模拟mouseover或mouseout时使用

由于是在希望触发的元素上调用 dispatchEvent(),所以 tartget 属性会自动传入

代码如下:

var btn = document.getElementById('myButton');

//创建事件对象
var event = document.createEvent('MouseEvents');//DOM3不用s //初始化事件对象
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,false,false,false,false,0,null); //触发事件
btn,dispatchEvent(event);

这样就完成了一个鼠标事件的模拟

模拟键盘事件

键盘事件在DOM3中正式纳入规范,所以这里只介绍DOM3中的模拟键盘事件

与模拟鼠标事件的区别在于

  • 传入的事件类型字符串为:KeyboardEvent
  • 事件包含的初始化方法为:initKeyEvent

initKeyEvent接收的参数如下:

  1. type(字符串):表示要触发的事件类型,如“keydown”
  2. bubbles(布尔值):表示事件是否应该冒泡,准确模拟应该为 true
  3. cancelable(布尔值):表示事件是否可以取消,准确模拟应为 true
  4. view(AbstractView):一般来说为 document.defaultView
  5. key(字符串):按下键的键码
  6. location(整数):表示按下了哪里的键,0默认主键盘,1左,2右,3数字键盘,4移动设备,5手柄
  7. modifiers(字符串):空格分隔的修改键列表如”Shift Ctrl“
  8. repeat(整数):在一行中按了这个键多少次
var event = document.createEvent('KeyboardEvent');

//初始化事件对象
event.initKeyboardEvent('keydown',true,true,document.defaultView,"a",0,"Shit ",0); //触发事件
btn.dispatchEvent(event);

要注意的是火狐中模拟键盘事件和标准DOM中有所不同

  • 事件类型参数:”KeyEvents“
  • 初始化方法:initKeyEvent()
  • 初始化方法的参数:从第五个开始不同
    • ctrlKey:表示是否按下 ctrl键
    • altKey:表示是否按下alt键
    • shiftKey:表示是否按下shift
    • metaKey:表示是否按下meta
    • keyCode(整数):被按下键的键码
    • charCode(整数):通过按键生成字符的ASCLL码

    

模拟变动事件

初始化参数为:

  • type
  • bubbles
  • cancelable
  • relatedNode:关联的DOM节点
  • preValue:变动前的值
  • newValue:变动后的值
  • attrName:特姓名
  • attrChange:特性变动

  

示例如下:

var event = document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted",true,false,someNode,"","","",0);
target.dispatchEvent(event);

模拟HTML事件

以focus事件为例:

var event =document.createElement('HTMLEvents');

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

target.dispatchEvent(event);

自定义事件

除了向上面那样模拟浏览器事件之外,我们也可以创建自己的自定义事件

与浏览器事件的区别在于,初始化事件不同

自定义事件的初始化方法为:initCustomEvent

接收以下参数:

  • type:触发事件的类型
  • bubbles:是否冒泡
  • cancelable:是否可以取消
  • detail(对象):可以是任意值

示例如下:

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

event.initCustomEvent("myEvent",true,false,"hello");

target.dispatchEvent(event);

像上面这样冒泡的自定义事件是可以其它元素指定针对该自定义事件的事件处理程序的

如:

document.addEventListener("myEvent",function(event){
console.log(event.detail);
},false);

  

Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟的更多相关文章

  1. Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件

    触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...

  2. Javascript高级编程学习笔记(72)—— 模拟事件(2)IE事件模拟

    IE中的事件模拟 低版本的IE浏览器作为前端开发的一股清流,想避过都不行 虽然低版本IE正在逐步被市场淘汰,不得不承认IE8以下的浏览器依然占了不小的份额 所以这里大概介绍IE8以下的低版本IE中的事 ...

  3. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  4. Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件

    DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...

  5. Javascript高级编程学习笔记(70)—— 事件(14)内存和性能

    由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...

  6. Javascript高级编程学习笔记(68)—— 事件(12)设备事件

    设备事件 随着智能手机与平板电脑的普及,为了更好地让用户与这些设备进行交互 浏览器引入了一种新的方式,而一类新的事件也应运而生,这就是设备事件 W3C从2011年开始制定关于设备事件的草案 下面将会介 ...

  7. Javascript高级编程学习笔记(66)—— 事件(10)变动事件

    变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...

  8. Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件

    键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...

  9. Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件

    鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...

随机推荐

  1. WebForm应用log4net记录错误日志——使用线程列队写入

    我的项目结构如下图: 日志帮助类库需要log4net包:工具—NuGet包管理器—管理解决方案NuGet程序包 线程日志帮助类 FlashLogger.cs 代码 using System; usin ...

  2. Redis分布式缓存

    Redis 主 slave 数据库优化-- 加inex, 分区 JVM调优--参数设置,比如偏向于计算的如何设置? 线程池:queue放满了之后,有什么方式能让他不拒绝掉?blockqueue就等在那 ...

  3. ztree实现中国省市区树形,可多选

    首先表 CREATE TABLE `sys_area` ( `id` INT(11) NOT NULL COMMENT '编号', `parent_id` INT(11) NOT NULL COMME ...

  4. leetcode7:反转整数

    给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...

  5. rn最新版测试

    1.使用软件版本rn-4.20.4.zipdrago-4.22.03 2.启动drago选择菜单‘对弈’ -> ‘对弈引擎设置’,点按钮‘添加’,选择‘已安装’,输入:姓名‘rn-4.20.4’ ...

  6. day 2:计算机的基础知识,编程语言分类

    本节内容 1,计算机的容量 2,编程语言介绍1,计算机的容量 1位 = 1bit 8bit = 1byte = 1字节 1024bytes = 1k bytes = 1KB 1024个 1024KB ...

  7. Android学习(三)

    学号 20189214 <Android程序开发>第八周学习总结 教材学习内容总结 GridView GridView和ListView一样是AbsListView的子类; 都需要一个Ad ...

  8. java33

    1.面向接口编程:将实现类对象(键盘鼠标)赋值给接口类型的变量(USB) interface修饰的类名称 好处:调用时可以是一个方法体即可(实现通用编程) 2.内部类:在类中定义了一个类 ------ ...

  9. 第九周助教工作总结——NWNU李泓毅

    1.助教博客链接: https://www.cnblogs.com/NWNU-LHY/ 2.作业要求博客链接: https://www.cnblogs.com/nwnu-daizh/p/1072688 ...

  10. Oracle 中DATE类型的计算

    select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_months(sysdate,1) f ...