解析JavaScript"模拟事件"的注意要点
发布在前端JavaScript开发2019年2月15日view:485PhantomJSPromiseSocket.ioredis编译与执行JanayeHTTPS369Cloud
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

今天小编就为大家分享一篇关于JavaScript”模拟事件”的注意要点详解,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

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");
}
//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
//触发事件
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);

结语

感谢您的观看,如有不足之处,欢迎批评指正。

获取资料

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:619586920,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论
发表评论
暂无评论
WRITTEN BY
前端攻城小牛
你所谓的稳定不过是在浪费生命
TA的新浪微博
PUBLISHED IN
前端JavaScript开发

enter code here往前端这条不归路再次迈进

我的收藏