原生JS实现模拟事件

我们经常用到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',false);
var event = new KeyboardEvent('keydown');
window.dispatchEvent(event);

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

注：IE11-均不支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!