元素绑定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 相关文章推荐
js操作select控件的几种方法
Jun 02 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
jquery自定义显示消息数量
2017/12/19 jQuery
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python telnet登陆功能实现代码
2020/04/16 Python
python中封包建立过程实例
2021/02/18 Python
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
客户经理岗位职责
2013/12/08 职场文书
军训考核自我鉴定
2014/02/13 职场文书
捐赠仪式主持词
2014/03/19 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
云冈石窟导游词
2015/02/04 职场文书
索赔员岗位职责
2015/02/15 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技