原生JS实现模拟事件

2017年04月04日Web前端

我们经常用到jQ中的模拟事件,他的原生方式,我们也有必要了解下。

一、模拟事件

1.模拟鼠标事件

MouseEvent.initMouseEvent()方法,在创建鼠标事件(通常使用Document.createEvent()方法)后,初始化该方法。具体的用法在canvas保存图片到本地小节中有使用。

语法:MouseEvent.initMouseEvent(type, canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);

注:该方式已经被废弃了(I8-不支持)。

详细的参数含义可以看,MDN文档路径:https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent

MouseEvent()方法

语法:event = new MouseEvent(typeArg,mouseEventInit) typeArg是事件类型的字符串形式,mouseEventInit是一个对象,具体的每项的含义可以参考:https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent

*{margin:0px;padding:0px;}
#box{width:100px;height:100px;border:1px solid #ccc;}
var oBtn = document.getElementById('box');
oBtn.addEventListener('click', function(e) {
    alert();
}, false);
var event = new MouseEvent('click');
oBtn.dispatchEvent(event);

首先创建个div,给div榜上事件并手动触发,我们打开页面,可以看到一个弹出框。

注:IE11-都不支持该方法。

2.模拟键盘事件

KeyboardEvent方法。

语法:event = new KeyboardEvent(typeArg, KeyboardEventInit); 参数含义和MouseEvent方法类似,详细地用法可以参考:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent

window.addEventListener('keydown', function(e) {
    alert();
}, false);
var event = new KeyboardEvent('keydown');
window.dispatchEvent(event);

给window绑定keydown事件,并触发。

注:IE11-均不支持。