元素绑定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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 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中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python群发邮件实例代码
2014/01/03 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
使用python实现tcp自动重连
2017/07/02 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
出纳工作岗位责任制
2014/02/02 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
优秀教师申报材料
2014/12/16 职场文书
党校个人总结
2015/03/04 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
朋友聚会开场白
2015/06/01 职场文书
在职证明范本
2015/06/15 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技