元素绑定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之软键盘实现(js源码)
Jan 30 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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加密解密函数代码
2013/06/19 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
Python实现栈的方法
2015/05/26 Python
Python可变参数函数用法实例
2015/07/07 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
python开发之函数定义实例分析
2015/11/12 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python实现复制文件到指定目录
2019/10/16 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
花卉与景观设计系大学生求职信
2013/10/01 职场文书
入股协议书
2014/04/14 职场文书
工作保证书怎么写
2015/02/28 职场文书
新店开张宣传语
2015/07/13 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript