元素绑定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获取焦点和失去焦点事件代码
Apr 21 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
Three.js快速入门教程
Sep 09 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
php控制文件下载速度的方法
2015/03/24 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP实现百度人脸识别
2019/05/06 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
js图片预加载示例
2014/04/30 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
如何编写jquery插件
2017/03/29 jQuery
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
php 修改密码实现代码
2017/05/24 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
农场厂长岗位职责
2013/12/28 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
新农村建设典型材料
2014/05/31 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL