js模拟点击事件实现代码-阿里云开发者社区

开发者社区> XOSG> 正文

js模拟点击事件实现代码

简介: js模拟点击事件实现代码 类型:转载 时间:2012-11-06  在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单。
+关注继续查看

js模拟点击事件实现代码

类型:转载 时间:2012-11-06 

在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单。上代码吧
html: 

复制代码代码如下:

请单击“提交”,测试提交按钮的单击事件也被触发了。

 
 
 
 
 
 

Javscript: 

复制代码代码如下:



经过测试,IE,FF,Chrome,Opera,Safari都没有问题,均可正常提交表单。 

但在实际的设计中,为了让提交按钮更好看,buildder经常把它们用a标签来处理,加个背景图片来模拟按钮,我们仍然用上面的思路来尝试,增加一个a标签,让它来提交表单,我们仅修改html。 

Html: 
复制代码代码如下:

请单击“提交”,测试提交按钮的单击事件也被触发了。

 
 
 
 
 
模拟提交按钮 
 

javascript: 

复制代码代码如下:




运行后,问题出现了,IE、FF、Opera均OK,但Chrome和Safari不能正常运行,后来网上搜索了下,发现a标签并不是和按钮一样有onclick()事件的,解决办法是针对 IE 和 FF编写不同的逻辑,JS代码如下: 
javascript: 
复制代码代码如下:



至此,问题解决,虽然这个问题很简单,但很容易被大家忽略,贴出来和大家一起分享。 

语法: 
createEvent(eventType)

参数 描述
eventType 想获取的 Event 对象的事件模块名。关于有效的事件类型列表,请参阅”说明”部分。

返回值

返回新创建的 Event 对象,具有指定的类型。

抛出

如果实现支持需要的事件类型,该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。

说明

该方法将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的 DOM 模块的名称。

下表列出了 eventType 的合法值和每个值创建的事件接口:

参数 事件接口 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()

用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event 对象参考。

该方法实际上不是由 Document 接口定义的,而是由 DocumentEvent 接口定义的。如果一个实现支持 Event 模块,那么 Document 对象就会实现 DocumentEvent 接口并支持该方法。

如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS事件模型
事件模型 发起方指事件是由谁产生的;比如,你喊谁谁谁回家吃饭,这时候你就是发起方; 监听方指事件是由谁来响应的,可以是一个,也可以是多个;比如,谁谁谁听到喊他回家吃饭,然后马上就回来了;  设计事件对象 添加监听方 删除监听方 清空监听方 触发监听方响应事件 JS实现模型 实现事件 在下面的函数中,向test中传递一个fn函数,将此函数作为参数进行传递; 如果之前用过c#的事件委托机制的话,就很容易理解下面这种写法了。
642 0
Node.js 事件循环
Node.js 事件循环 Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高。 Node.js 几乎每一个 API 都是支持回调函数的。
912 0
小技巧:onchange事件+iframe 模拟异步文件上传
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengyi_L/article/details/51271918 1.上传文件一般通过这样来实现,但是file的按钮不是很美观。
816 0
Js事件触发列表与解说
一般事件 事件 浏览器支持 描述 onClick HTML: 2|3|3.2|4 Browser: IE3|N2|O3 ...
668 0
.Net中模拟上传文件动态显示进度的事件示例
    public class UploadEventArgs : EventArgs//作为事件的参数,必须派生自EventArgs基类     {         public UploadEventArgs(int percent)         {             this.
614 0
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
原文:JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置 日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法。
871 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3278 0
+关注
XOSG
半路出家的MEAN全栈工程师; 从运维转型开发的佛系程序员
503
文章
18
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载