元素绑定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 相关文章推荐
javascript编程起步(第五课)
Jan 10 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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 XML操作类DOMDocument
2009/12/16 PHP
PHP学习笔记之一
2011/01/17 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Python threading多线程编程实例
2014/09/18 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
检讨书1000字
2014/10/11 职场文书
房产公证书
2015/01/23 职场文书
地震捐款简报
2015/07/21 职场文书
《实心球》教学反思
2016/02/23 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android