元素绑定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 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
layui使用label标签的方法
Sep 14 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
基于JavaScript实现随机点名器
Feb 25 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根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php发送post请求的三种方法
2014/02/11 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
jquery each()源代码
2011/02/14 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
简单谈谈Python流程控制语句
2016/12/04 Python
python绘制圆柱体的方法
2018/07/02 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
Unix如何添加新的用户
2014/08/20 面试题
J2EE包括哪些技术
2016/11/25 面试题
高中国旗下的演讲稿
2014/08/28 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
工作检讨书范文
2015/01/23 职场文书
国博复兴之路观后感
2015/06/02 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python