事件, 指的是网页中某个特定的交互时刻
一般来说事件由浏览器厂商负责提供, 一般由用户操作或者其它浏览器功能来触发
但是有一类特殊的事件, 那就是由我们开发人员通过 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 个参数以此对应正常的浏览器事件中的鼠标事件的事件对象:
type(字符串): 表示触发鼠标事件的具体类型, 如 "click"
bubbles(布尔值): 表示该事件是否冒泡, 为准确模拟鼠标事件应该为 true
cancelable(布尔值): 表示该事件是否可以取消, 为准确模拟应为 true
view(AbstractView): 与事件关联的视图, 应该设置为 document.defaultView
detail(整数): 与事件有关的详细信息, 此处应该设为 0
screenX(整数): 相对于屏幕的 X 坐标
screenY(整数): 相对于屏幕的 Y 坐标
clientX(整数): 相对于视口的 X 坐标
clientY(整数): 相对于视口的 Y 坐标
ctrlKey(布尔值): 表示是否按下 ctrl, 默认 false
altKey(布尔值): 表示是否按下 alt, 默认 false
shiftKey(布尔值): 表示是否按下 shift 键, 默认 false
metaKey(布尔值): 表示是否按下 meta 键, 默认 false
button(整数): 表示按下哪一个鼠标键
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 接收的参数如下:
type(字符串): 表示要触发的事件类型, 如 "keydown"
bubbles(布尔值): 表示事件是否应该冒泡, 准确模拟应该为 true
cancelable(布尔值): 表示事件是否可以取消, 准确模拟应为 true
view(AbstractView): 一般来说为 document.defaultView
key(字符串): 按下键的键码
location(整数): 表示按下了哪里的键, 0 默认主键盘, 1 左, 2 右, 3 数字键盘, 4 移动设备, 5 手柄
modifiers(字符串): 空格分隔的修改键列表如 "Shift Ctrl"
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 事件模拟
来源: http://www.bubuko.com/infodetail-2967605.html