javascript触发模拟鼠标点击事件


Posted in Javascript onJune 26, 2019

事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。

一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。

例如在ie下看看这个例子:

//document上绑定自定义事件ondataavailable
document.attachEvent('ondataavailable', function (event) {
alert(event.eventType);
});
var obj=document.getElementById("obj");
//obj元素上绑定click事件
obj.attachEvent('onclick', function (event) {
alert(event.eventType);
});
//调用document对象的createEventObject方法得到一个event的对象实例。
var event = document.createEventObject();
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.fireEvent('ondataavailable', event);
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
obj.fireEvent('onclick', event);
};

fireEvent的官方文档

createEventObject的官方文档

再看看高级浏览器(chrome,firefox等)的例子:

//document上绑定自定义事件ondataavailable
document.addEventListener('ondataavailable', function (event) {
alert(event.eventType);
}, false);
var obj = document.getElementById("obj");
//obj元素上绑定click事件
obj.addEventListener('click', function (event) {
alert(event.eventType);
}, false);
//调用document对象的 createEvent 方法得到一个event的对象实例。
var event = document.createEvent('HTMLEvents');
// initEvent接受3个参数:
// 事件类型,是否冒泡,是否阻止浏览器的默认行为
event.initEvent("ondataavailable", true, true);
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent('HTMLEvents');
event1.initEvent("click", true, true);
event1.eventType = 'message';
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
obj.dispatchEvent(event1);
};

在实际封装中没这么简单,看了一下jQuery.event.trigger的源码

是通过模拟来实现了,给某元素绑定一个事件处理函数,如果有触发事件的实际操作就会执行相应的事件处理函数,所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 #Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 #Javascript
通过javascript实现段落的收缩与展开
Jun 26 #Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 #Javascript
Vue实现日历小插件
Jun 26 #Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 #Javascript
Vue组件实现触底判断
Jun 26 #Javascript
You might like
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
js获取单选按钮的数据
2006/11/27 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
js确定对象类型方法
2012/03/30 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
js字符串转成JSON
2013/11/07 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
python环境下安装opencv库的方法
2020/03/05 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
职称自我鉴定
2013/10/15 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
2014年清明节寄语
2014/04/03 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android