元素绑定click点击事件方法


Posted in Javascript onJune 08, 2015

最简单的莫过于使用click方法:

<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/>
<script>
 var btn = document.getElementById('btn');
 btn.click();
</script>

所有浏览器都弹出了1。但是如果把input换成div呢?

<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(2)"></div>
<script>
 var d1 = document.getElementById('d1');
 d1.click();
</script>

这次Safari/Chrome中没有弹出2。即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。
以上的事件都是直接添加在html属性中的(内联事件)。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的事件吗?

<input id="btn1" type="button" value="BUTTON 1"/>
<input id="btn2" type="button" value="BUTTON 2"/>
<script>
 var addListener = window.addEventListener ?
   function(el, type, fn) { el.addEventListener(type, fn, false); } :
   function(el, type, fn) { el.attachEvent('on' + type, fn); };
 var btn1 = document.getElementById('btn1');
 var btn2 = document.getElementById('btn2');
 btn1.onclick = function(){
   alert(3);
 };
 addListener(btn2, 'click', function() {alert(4)});
 btn1.click();
 btn2.click();
</script>

所有浏览器都依次弹出了3,4。说明支持click方法的元素,无论使用内联方式还是el.onXX又或addEventListener/attachEvent添加事件都能触发。

click方法已经写入了HTML5草案,如果Safari/Chrome完成对剩下的元素的实现(非input/button)。那么模拟点击将十分简单,直接调用click方法。Firefox也是刚刚在版本5中实现对非input/button元素的click方法实现,这点Safari/Chrome有些落后了。
既然Safari/Chrome中click不可用, 我们就用dispatchEvent来实现了。

<input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/>
<input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/>
<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div>
<script>
 function dispatch(el, type){
   try{
     var evt = document.createEvent('Event');
     evt.initEvent(type,true,true);
     el.dispatchEvent(evt);
   }catch(e){alert(e)};
 }
 var btn1 = document.getElementById('btn1');
 var btn2 = document.getElementById('btn2');  
 var d1 = document.getElementById('d1');
 dispatch(btn1, 'click');
 dispatch(btn2, 'click');
 dispatch(d1, 'click');
</script>

依次弹出了1,2,3。换成其它事件添加方式亦可触发。IE中还有个fireEvent去主动触发事件,当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。

最后给出我的triggerClick方法,实现方式判断浏览器,判断nodeName。依据是Safari/Chrome不支持非input/button元素的click方法。

function triggerClick( el ) {
 var nodeName = el.nodeName,
   safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase());
 if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) {
   try{
     var evt = document.createEvent('Event');
     evt.initEvent('click',true,true);
     el.dispatchEvent(evt);
   }catch(e){alert(e)};
 }else{
   el.click();
 }
}

上面的实现方式让你能明白浏览器的差异,但实现其实有点罗嗦。直接判断元素是否具有click方法即可,Safari/Chrome中非input/button元素没有click方法,返回undefined。

function triggerClick( el ) {
 if(el.click) {
   el.click();
 }else{
   try{
     var evt = document.createEvent('Event');
     evt.initEvent('click',true,true);
     el.dispatchEvent(evt);
   }catch(e){alert(e)};    
 }
}

特性判断也比浏览器判断有更好的前瞻性,比如Safari/Chrome在后续版本中实现了非input/button元素的click方法,那么特性判断的函数仍然可以向下兼容。

以上所述就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
jQuery数据类型小结(14个)
Jan 08 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
JavaScript获取URL汇总
Jun 08 #Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 #Javascript
详解JavaScript中的every()方法
Jun 08 #Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 #Javascript
javaScript中with函数用法实例分析
Jun 08 #Javascript
简介JavaScript中的sub()方法的使用
Jun 08 #Javascript
简介JavaScript中strike()方法的使用
Jun 08 #Javascript
You might like
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
学习ExtJS table布局
2009/10/08 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
办公室副主任职责范本
2014/03/08 职场文书
三爱活动实施方案
2014/03/19 职场文书
项目建议书怎么写
2014/05/15 职场文书
学习党代会心得体会
2014/09/05 职场文书
一份文言文检讨书
2014/09/13 职场文书
2014年司法所工作总结
2014/11/22 职场文书
培训师岗位职责
2015/02/14 职场文书
亮剑观后感600字
2015/06/05 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Python中的嵌套循环详情
2022/03/23 Python