JavaScript"模拟事件"的注意要点详解
作者:Oliveryoung 时间:2024-04-30 09:56:47
DOM中的事件模拟
三个步骤:
首先通过document.createEvent()
方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:
UIEvents(DOM3中的UIEvent)鼠标和键盘事件;
MouseEvents(DOM3中的MouseEvent)鼠标事件;
MutationEvents(DOM3中的MutationEvent)变动事件;
HTMLEvents(没有DOM3中对应的事件)HTML事件;
其次在创建了event对象之后,还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法,为它传入适当的数据就可以初始化该event对象。用event.init......()
此类行的方法。
最后就是触发事件。这需要使用dispatchEvent()
方法,接收一个参数,即表示要触发的event对象。
模拟鼠标事件
首先创建鼠标事件对象的方法createEvent()传入MouseEvents,返回的对象的方法initMouseEvent(),接收15个信息:
type(字符串):事件类型如“click”;
bubble(布尔值):是否冒泡;
cancelable(布尔值):是否可取消;
view(AbstractView):与事件关联的视图,一般为
document.defaultView
;detail(整数):一般为0,一般只有事件处理程序使用;
screenX(整数):事件相对于屏幕的X坐标;
screenY(整数);
clientX(整数):事件相对于视口的X坐标;
clientY(整数);
ctrlKey(布尔值):是否按下了Ctrl键,默认为false;
altKey(布尔值);
shiftKey(布尔值);
metaKey(布尔值);
button(整数):表示按下了哪个鼠标键,默认为0;
relatedTarget(对象):表示与事件相关的对象。一般只有在模拟mouseover与mouseout时使用。
最后记得把event对象传给dispatchEvent()方法。
如模拟按钮的单击事件:
//模拟click事件
//获取btn
var btn = document.querySelector("#btn");
//创建event
var event = document.createEvent("MouseEvents");
//初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件绑定事件处理程序
btn.onclick = function () {
console.log("hello");
}
//触发事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;
另外,建议使用构造函数"MouseEvent":
var evt = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window
});
模拟键盘事件
首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents,返回的对象的方法initKeyEvent(),接收下面参数:
type(字符串):要触发的事件类型,“keydown”等;
bubbles(布尔值):表示事件是否应该冒泡;
cancelable(布尔值):是否可以取消;
view(AbstractView):与事件关联的视图。一般为
document.defaultView
;key(布尔值):表示按下的键的键码;
location(整数):表示按下哪里的键。0为主键盘;1为左;2为右;3为数字键盘;4为虚拟键盘;5为手柄;
modifiers(字符串):空格分隔的修改键列表,如“shift”;
repeat(整数):在一行中按下了多少次这个键;
由于DOM3级不提倡使用keypress事件,因此只能利用这种技术来模拟keydown和keyup事件:
var textbox = document.querySelector("#myTextBox");
var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);
textbox.dispatchEvent(event);
在Firefox中,调用createEvent()并传入“KeyEvents”就可以创建一个键盘事件,返回的事件对象会包含一个initKeyEvent()方法,接收参数:
type;
bubbles;
cancelable;
view;
ctrlKey;
altKey;
shiftKey;
metaKey;
keyCode;
charCode;
另外,建议使用构造函数“KeyboardEvent”
模拟其他事件
浏览器中很少使用变动事件和HTML事件;要模拟变动事件,可以用createEvent("MutationEvent");initMutationEvent();要模拟HTML事件,可以用createEvent("HTMLEvents");initEvent();
自定义DOM事件
用createEvent("CustomEvent");initCustomEvent()方法,接收参数:type;bubbles;cancelable;detail;
var btn = document.querySelector("#btn");
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent("click",true,true,"Hello there");
btn.onclick = function () {
console.log(event.detail);
};
btn.dispatchEvent(evt);
IE中的事件模拟
调用document.createEventObject()
方法,创建event对象,并指定必要的信息,最后在目标上调用fireEvent()方法,接收两个参数:事件处理程序名称和event对象:
var btn = document.querySelector("#btn");
var evt = document.createEventObject();
evt.screenX = 0;
evt.screenY = 0;
evt.clientX = 0;
evt.clientY = 0;
evt.ctrlKey = false;
evt.altKey = false;
evt.shiftKey = false;
evt.button = 0;
btn.fireEvent("onclick",evt);
来源:https://segmentfault.com/a/1190000004339133
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
gchart:基于google图表API的jquery组件全攻略:1、入门
![](https://img.aspxhome.com/file/UploadPic/20101/25/chart001-34s.png)
vue中el-table合并列的具体实现
![](https://img.aspxhome.com/file/2023/0/130230_0s.png)
完美解决torch.cuda.is_available()一直返回False的玄学方法
![](https://img.aspxhome.com/file/2023/8/128218_0s.jpg)
asp如何用数据库制作一个多用户版的计数器?
Python区块链客户端类开发教程
详解python编程slice与indices函数用法示例
windows下安装、卸载mysql服务的方法(mysql 5.6 zip解压版安装教程)
![](https://img.aspxhome.com/file/2023/8/124508_0s.jpg)
python 画二维、三维点之间的线段实现方法
![](https://img.aspxhome.com/file/2023/6/123536_0s.jpg)
mysql索引必须了解的几个重要问题
SQL脚本语言学习(黑客篇)
node基于express框架操作Mysql数据库的步骤
![](https://img.aspxhome.com/file/2023/4/122384_0s.jpg)
numpy的Fancy Indexing和array比较详解
oracle group by语句实例测试
pyqt远程批量执行Linux命令程序的方法
![](https://img.aspxhome.com/file/2023/1/120981_0s.jpg)
Python利用Flask-Mail实现发送邮件详解
![](https://img.aspxhome.com/file/2023/8/115038_0s.png)
Python decimal模块的使用示例详解
ES5学习教程之Array对象
微信小程序录音实现功能并上传(使用node解析接收)
python 实现将小图片放到另一个较大的白色或黑色背景图片中
![](https://img.aspxhome.com/file/2023/4/115754_0s.jpg)