13.6 模拟事件

在 document 对象上调用 document.createEvent() 方法创建 event 对象，接收一个参数，要创建的事件的字符串

参数	说明
UIEvents	UI 事件，DOM3中是UIEvent
MouseEvents	鼠标事件，DOM3中是MouseEvent
MutationEvents	DOM 变动事件，DOM3中是MutationEvent
HTMLEvents	HTML 事件，没有对应的 DOM3级事件

创建对象-初始化-触发事件（dispatchEvent方法）

一、DOM 中的事件模拟

1.模拟鼠标事件

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); //触发事件

模拟鼠标事件的初始化方法为 initMouseEvent，该方法接收15个参数，对应 DOM 中的事件对象属性

参数	取值
type	事件类型
bubbles（布尔值）	是否可以冒泡，一般为 true
cancelable（布尔值）	是否可以取消，一般为 true
view	相关的视图，一般为 document.defaultView
detail	通常设置为0
screenX、screenY、clientX、clientY	自定义设置
ctrlKey、altKey、shiftKey、metaKey	默认为 false
button	按下了鼠标哪个键，默认为0
relatedTarget	相关元素，模拟 mouseover 和 mouseout 时使用

2.模拟键盘事件

DOM3 级方式创建，初始化方法为 initKeyboardEvent，该方法接收8个参数

参数	取值
type	事件类型
bubbles（布尔值）	是否可以冒泡，一般为 true
cancelable（布尔值）	是否可以取消，一般为 true
view	相关的视图，一般为 document.defaultView
key	按下键的键码（DOM3中为具体的字符而不是 ASCII 码）
location	按下了哪里的键，0主键盘，1左，2右，3数字键盘，4移动设备（虚拟键盘），5手柄
modifiers（字符串）	空格分隔的修改键列表
repeat	在一行中按了多少次键

var textbox = document.getElementById('myTextbox'),
    event;
if(document.implementation.hasFeature('KeyboardEvents','3.0')) {
    // 判断是否支持 DOM3
    event = document.createEvent('KeyboardEvent'); //创建键盘事件
    event.initKeyboardEvent('keydown',true,true,document.defaultView,'a',0,'shift',0); //初始化
}
textbox.dispatchEvent(event);

Firefox 中创建，初始化方法为 initKeyEvent，该方法接收10个参数

参数	取值
type	事件类型
bubbles（布尔值）	是否可以冒泡，一般为 true
cancelable（布尔值）	是否可以取消，一般为 true
view	相关的视图，一般为 document.defaultView
ctrlKey、altKey、shiftKey、metaKey	默认为 false
keyCode	键码，默认为0，字符键为 ASCII 码值，非字符键有其对应值
charCode	ASCII 码，默认为0

另外，Firefox 中创建时，createEvent 方法中传入的参数也不同

var textbox = document.getElementById('myTextbox');
var event = document.createEvent('KeyEvent'); //创建键盘事件
event.initKeyEvent('keydown',true,true,document.defaultView,false,false,false,false,65,65); //初始化
textbox.dispatchEvent(event);

3.模拟其他事件

创建变动事件，initMutationEvent 方法接收以下参数
type、bubbles、cancelable、relatedTarget、preValue、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);

4.自定义 DOM 事件

创建自定义事件，initCustomEvent 方法接收四个参数
type、bubbles、cancelable、detail

var div = document.getElementById('myDiv'),
    event;
if(document.implementation.hasFeature('CustomEvents','3.0')) {
    event = document.createEvent('CustomEvent'); 
    event.initCustomEvent('myevent',true,false,'hello world'); 
    div.dispatchEvent(event);
}

二、IE 中的事件模拟

IE 中创建对象调用 document.createEventObject() 方法，不传入参数，创建通用对象
之后不支持自动初始化，需自己将所有属性一一添加
最后调用 fireEvent() 触发事件，接收两个参数：事件处理程序名称、event 对象

var btn = document.getElementById('myBtn');
var event = document.createEventObject(); //创建对象
event.screenX = 100;
event.screenY = 0;
event.clientX = 100;
event.clientY = 0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
btn.fireEvent('onclick',event); //触发事件

来源：CSDN

作者：糖小昔

链接：https://blog.csdn.net/weixin_44774877/article/details/104128876