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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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写的小东西
2006/12/06 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
JS 继承实例分析
2008/11/04 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Python玩转Excel的读写改实例
2019/02/22 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
学生自我鉴定
2013/12/18 职场文书
公务员保密承诺书
2014/03/27 职场文书
检举信的格式及范文
2014/04/04 职场文书
高中生评语大全
2014/04/25 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
2015年加油站工作总结
2015/05/13 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS