我们经常用到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-均不支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。