Javascript高级编程学习笔记（71）—— 模拟事件（1）DOM事件模拟

时间：2022-03-14 05:13:44

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

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

但是有一类特殊的事件，那就是由我们开发人员通过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);

　　

相关文章