javascript事件模拟
通常事件是通过用户的操作行为(点击、滚动等)或者浏览器的行为(加载onload、卸载等)来触发完成的;但是事件也可以通过js来触发完成(通过js达到行为触发事件的效果),这就是事件模拟;
事件模拟的步奏:
1.给DOM元素绑定事件(普通的事件绑定);
2.创建模拟事件对象;
let eve=document.createEvent("MouseEvents");
参数说明:UIEvents,一般化的ui事件,鼠标事件和键盘事件都继承于该事件;MouseEvents,一般化的鼠标事件;MutationEvents,DOM变动事件;HTMLEvents,html事件,没有对应的DOM3级。DOM2是复数形式,DOM3是单数形式,经测试两种形式都可以起作用;
DOM2级中对键盘事件没有做出规范的规定。在DOM3级中对键盘事件有明确的定义。调用createEvent方法,传入KeyboardEvent能够创建键盘事件。返回的事件对象包含一个initKeyEvent的方法。这个方法的参数如下:type,事件类型,如keydown;bubbles,事件是否支持冒泡,如true;cancelable,事件是否可以取消,如true;view,事件的视图,一般为document.defaultView;key,表示按下键的键码;location,表示按下了哪里的键,0表示默认的主键盘,1表示左,2表示右,3表示数字键盘,4表示移动设备,5表示手柄;modifiers,空格分隔的修改键列表,如shift;repeat,按这个键的次数。
CustomEvent事件对象,也就是自定义事件对象,通过initCustomEvent初始化对象;
3.初始化模拟事件对象;
对于需要模拟鼠标事件,一般只需要传递前3个参数。
4.触发模拟事件对象;
btn.dispatchEvent(evt);
事件模拟存在兼容性问题,小于等于ie8版本把2、3、4步奏合并成了两个步奏,但是总体的思路是类似的,就是先创建事件模拟对象,然后再触发事件模拟对象;
var evt=document.createEventObject(); btn.fireEvent("onclick",evt);
以上内容整理自浅谈JavaScript的事件(事件模拟) - 水击三千 - 博客园 (cnblogs.com)
自定义事件是对内置事件类型的补充,不包含内置事件;而模拟事件是将原本由行为触发的内置事件,改为通过js显式的触发,同时模拟事件也可以模拟自定义事件的触发,模拟事件包含内置事件和自定义事件;
------------恢复内容开始------------
ie和非ie给元素添加事件监听:
------------恢复内容开始------------
通常事件是通过用户的操作行为(点击、滚动等)或者浏览器的行为(加载onload、卸载等)来触发完成的;但是事件也可以通过js来触发完成(通过js达到行为触发事件的效果),这就是事件模拟;
事件模拟的步奏:
1.给DOM元素绑定事件(普通的事件绑定);
2.创建模拟事件对象;
let eve=document.createEvent("MouseEvents");
参数说明:UIEvents,一般化的ui事件,鼠标事件和键盘事件都继承于该事件;MouseEvents,一般化的鼠标事件;MutationEvents,DOM变动事件;HTMLEvents,html事件,没有对应的DOM3级。DOM2是复数形式,DOM3是单数形式,经测试两种形式都可以起作用;
DOM2级中对键盘事件没有做出规范的规定。在DOM3级中对键盘事件有明确的定义。调用createEvent方法,传入KeyboardEvent能够创建键盘事件。返回的事件对象包含一个initKeyEvent的方法。这个方法的参数如下:type,事件类型,如keydown;bubbles,事件是否支持冒泡,如true;cancelable,事件是否可以取消,如true;view,事件的视图,一般为document.defaultView;key,表示按下键的键码;location,表示按下了哪里的键,0表示默认的主键盘,1表示左,2表示右,3表示数字键盘,4表示移动设备,5表示手柄;modifiers,空格分隔的修改键列表,如shift;repeat,按这个键的次数。
CustomEvent事件对象,也就是自定义事件对象,通过initCustomEvent初始化对象;
3.初始化模拟事件对象;
对于需要模拟鼠标事件,一般只需要传递前3个参数。
4.触发模拟事件对象;
btn.dispatchEvent(evt);
事件模拟存在兼容性问题,小于等于ie8版本把2、3、4步奏合并成了两个步奏,但是总体的思路是类似的,就是先创建事件模拟对象,然后再触发事件模拟对象;
var evt=document.createEventObject(); btn.fireEvent("onclick",evt);
以上内容整理自浅谈JavaScript的事件(事件模拟) - 水击三千 - 博客园 (cnblogs.com)
自定义事件是对内置事件类型的补充,不包含内置事件;而模拟事件是将原本由行为触发的内置事件,改为通过js显式的触发,同时模拟事件也可以模拟自定义事件的触发,模拟事件包含内置事件和自定义事件;
------------恢复内容结束------------
------------恢复内容结束------------