javascript触发模拟鼠标点击事件

事件触发器就是用来触发某个元素下的某个事件，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的源码

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • asp.net js模拟Button点击事件

    复制代码 代码如下: <script type="text/javascript"> ///模拟按钮点击事件,插入数据 function addTmpDataApp() { document.<%=formCC.ClientID %>.<%=btnjh.ClientID %>.click(); } </script> 这有时候是无法执行模拟点击的. 需要加上一句代码就可以了. 复制代码 代码如下: <script type=&quo

  • 使用JS或jQuery模拟鼠标点击a标签事件代码

    复制代码 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").click(); //既触发了a标签的点击事件,又触发了页面跳转 把 &

  • js模拟点击事件实现代码

    html: 复制代码 代码如下: <h3>请单击"提交",测试提交按钮的单击事件也被触发了.</h3> <button id="btn">提交</button> <form action="#" method="get" id="form"> <input type="text" name="site"

  • Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox

    一把情况下模拟点击一般两个方面,模拟点击超级连接事件firefox的兼容的函数为对HTMLAnchorElement 加入onclick事件 复制代码 代码如下: try { // create a element so that HTMLAnchorElement is accessible document.createElement('a'); HTMLElement.prototype.click = function () { if (typeof this.onclick == 'f

  • javascript触发模拟鼠标点击事件

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

  • JavaScript代码模拟鼠标自动点击事件示例

    JavaScript代码模拟鼠标自动点击事件示例

    利用JavaScript代码可以帮助我们实现鼠标的自动点击事件.比如点击了按钮1以后,JavaScript代码会自动去点击下一个按钮,一直点击到按钮5才会停止(可根据实际情况进行相应的调整). 效果图如下所示: 按钮1被点击以后,通过JavaScript的代码自动点击按钮2,代码点击了按钮2之后又会去点击按钮3,以此类推,直到点击到按钮5为止. 首先先设置几个按钮,然后再设置一个盒子包裹着一些文字,方便我们在接下来js部分中更换里面的内容时,更加直观的看到它的效果. HTML代码部分: 通过cs

  • JavaScript关于某元素点击事件的监听和触发

    JavaScript关于某元素点击事件的监听和触发

    目录 一. 触发元素同步效果 方法一: 原生JavaScript的click()点击事件 方法二:JQuery事件 — trigger()方法 二. 触发元素监听效果 方法一: 原生JavaScript监听 方法二:JQuery监听 场景:在javascript中,如果引用了某个框架中的元素,元素已在原框架实现并内置了点击事件,此时我们希望自己新建的元素的点击事件也触发和前述元素一样的效果. 举例:假设现存在元素A,元素B 方法①:元素A的点击事件会触发元素B的点击事件方法②:直接监听元素B的点

  • jquery 触发a链接点击事件解决方案

    jquery 触发a链接点击事件 复制代码 代码如下: <p class="btnSubmit"><a href="javascript:submitData();">确认</a></p> $(".btnSubmit a")[0].click(); <p id="tob"><a href="1.html">这是文字</a>&

  • wx.CheckBox创建复选框控件并响应鼠标点击事件

    wx.CheckBox创建复选框控件并响应鼠标点击事件

    本文实例为大家分享了wx.CheckBox创建复选框控件并响应鼠标点击事件的具体代码,供大家参考,具体内容如下 执行效果图: 执行代码: #!/usr/bin/env python # -*-encoding:utf-8 -*- 'Crteate CheckBox Example' import wx class MyFrame(wx.Frame): #子类化框架对像 def __init__(self,parent,id): #定义子类构造器 wx.Frame.__init__(self,pa

  • 易语言模拟鼠标点击实现方法

    易语言对于初学者而言是一种非常好学的中文编程语言,能够快速地实现很多功能,全汉语编程,简单易上手,易语言功能强大实用,系统全部自行设计开发,且易语言自带的即时帮助系统,非常方便. 这里,教大家如何实现模拟鼠标点击. 1.进入易语言界面,在右边的工具栏中,分别找到"编辑框""标签""按钮"三个控件. 2.在主编辑界面中,如图所示摆放位置,进行初步界面搭建. 3.在左侧的属性栏中找到"标题"属性,分别给标签设置为"X&q

  • PyQt5重写QComboBox的鼠标点击事件方法

    最近学PyQt5,想要做一个串口调试助手来练练手,之前用了正点原子的串口上位机,觉得点击ComboBox自动检测串口这个功能很棒,之前用QT5写串口调试助手的时候也想加入这个功能,但是一直没有成功,之后就不了了之,现在用了PyQt之后就想着一定要实现这个功能,百度了之后看了很多资料都没有找到直接的解决方法,但是大家都是在强调重写鼠标点击事件,然后自己慢慢实验终于写出来了. 我的开发环境是PyCharm+Python3.6+PyQt5.9.2 1.建立工程创建界面什么的我就不写了,百度一大堆,重点

  • python模拟鼠标点击和键盘输入的操作

    python模拟鼠标点击和键盘输入的操作

    所有代码都是网上百度出来的,通过个人实践找到适合自己的. 采用的python 库是 pymouse.pykeyboard 安装时直接pip安装的,pip install PyUserInput 安装不成功的可以参照http://www.lfd.uci.edu/~gohlke/pythonlibs/这个地址,内容很全 实现了一个最简单的输入密码,enter进入的登录过程 如果想遍历,可以使用itertools 包,很有用,具体用法这里不介绍了. · 鼠标点击 有m.click(x, y, butt

  • layui问题之模拟select点击事件的实例讲解

    一.问题 不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变 二.经过 刚开始查看layui官方文档,发现仅仅只是有select监听事件,即: form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 }); 但是,这个事件需要操作页面,不可取. 三.结果 查

随机推荐