原生JS实现模拟事件

2017年04月04日Web前端0

我们经常用到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-均不支持。

JavaScript

目录