元素绑定click点击事件方法

 更新时间:2015年06月08日 16:37:45   投稿:hebedich  
当点击元素时,会发生 click 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

最简单的莫过于使用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中replace()方法

    浅谈javascript中replace()方法

    这篇文章主要介绍了浅谈javascript中replace()方法,replace函数方法是返回根据正则表达式进行文字替换后的字符串的复制,需要的朋友可以参考下
    2015-11-11
  • JavaScript 最佳实践:帮你提升代码质量

    JavaScript 最佳实践:帮你提升代码质量

    在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧
    2016-12-12
  • 如何使用webpack5+TypeScript+npm发布组件库

    如何使用webpack5+TypeScript+npm发布组件库

    这篇文章主要介绍了如何使用webpack5+TypeScript+npm发布组件库,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • JavaScript字符串转数字的5种方法及遇到的坑

    JavaScript字符串转数字的5种方法及遇到的坑

    JavaScript是一个神奇的语言,字符串转数字有5种方法,各有各的坑法!接下来通过本文给大家介绍JavaScript字符串转数字的5种方法及其陷阱,感兴趣的朋友一起看看吧
    2018-07-07
  • 深度解析JavaScript对象继承

    深度解析JavaScript对象继承

    JavaScript中的对象继承是构建灵活、可维护代码的关键部分,本文主要介绍了深度解析JavaScript对象继承,包括原型链继承、构造函数继承、组合继承等,感兴趣的可以了解一下
    2024-01-01
  • 响应式表格之固定表头的简单实现

    响应式表格之固定表头的简单实现

    下面小编就为大家带来一篇响应式表格之固定表头的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS实现的简单下拉框联动功能示例

    JS实现的简单下拉框联动功能示例

    这篇文章主要介绍了JS实现的简单下拉框联动功能,涉及javascript事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • 根据经纬度计算地球上两点之间的距离js实现代码

    根据经纬度计算地球上两点之间的距离js实现代码

    最近用到了根据经纬度计算地球表面两点间距离的公式,然后就用JS实现了一下,根据地球是一个光滑的球面以及并不是一个真正的圆球体,而是椭球延伸出两种方法,感兴趣的你可以参考下
    2013-03-03
  • li隔行换色效果代码升级版

    li隔行换色效果代码升级版

    增加了对同一ID内的多个子容器中的tag(标签)分别做隔行处理。div+css布局下,也可以控制了
    2008-05-05
  • js数组去重的常用方法总结

    js数组去重的常用方法总结

    本篇文章主要是对js数组去重的三种常用方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论