如何给元素绑定click点击事件

最简单的莫过于使用click方法:

1 <input id="btn" type="button" value="BUTTON" οnclick="alert(1)"/>
2 <script>
3     var btn = document.getElementById('btn');
4     btn.click();
5 </script>

所有浏览器都弹出了1。但是如果把input换成div呢?

1 <div id="d1" style="background:gold;width:50px;height:50px;" οnclick="alert(2)"></div>
2 <script>
3     var d1 = document.getElementById('d1');
4     d1.click();
5 </script>

这次Safari/Chrome中没有弹出2。即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。

以上的事件都是直接添加在html属性中的(内联事件)。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的事件吗?

01 <input id="btn1" type="button" value="BUTTON 1"/>
02 <input id="btn2" type="button" value="BUTTON 2"/>
03 <script>
04     var addListener = window.addEventListener ?
05         function(el, type, fn) { el.addEventListener(type, fn, false); } :
06         function(el, type, fn) { el.attachEvent('on' + type, fn); };
07     var btn1 = document.getElementById('btn1');
08     var btn2 = document.getElementById('btn2');
09     btn1.onclick = function(){
10         alert(3);
11     };
12     addListener(btn2, 'click'function() {alert(4)});
13     btn1.click();
14     btn2.click();
15  
16 </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来实现了。

01 <input id="btn1" type="button" value="BUTTON 1" οnclick="alert(1)"/>
02 <input id="btn2" type="button" value="BUTTON 2" οnclick="alert(2)"/>
03 <div id="d1" style="background:gold;width:50px;height:50px;" οnclick="alert(3)"></div>
04 <script>
05     function dispatch(el, type){
06         try{
07             var evt = document.createEvent('Event');
08             evt.initEvent(type,true,true);
09             el.dispatchEvent(evt);
10         }catch(e){alert(e)};
11     }
12     var btn1 = document.getElementById('btn1');
13     var btn2 = document.getElementById('btn2');    
14     var d1 = document.getElementById('d1');
15     dispatch(btn1, 'click');
16     dispatch(btn2, 'click');
17     dispatch(d1, 'click');
18  
19 </script>

依次弹出了1,2,3。换成其它事件添加方式亦可触发。IE中还有个fireEvent去主动触发事件,当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。

最后给出我的triggerClick方法,实现方式判断浏览器,判断nodeName。依据是Safari/Chrome不支持非input/button元素的click方法。

01 function triggerClick( el ) {
02     var nodeName = el.nodeName,
03         safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase());
04     if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) {
05         try{
06             var evt = document.createEvent('Event');
07             evt.initEvent('click',true,true);
08             el.dispatchEvent(evt);
09         }catch(e){alert(e)};
10     }else{
11         el.click();
12     }
13 }

上面的实现方式让你能明白浏览器的差异,但实现其实有点罗嗦。直接判断元素是否具有click方法即可,Safari/Chrome中非input/button元素没有click方法,返回undefined。

01 function triggerClick( el ) {
02     if(el.click) {
03         el.click();
04     }else{
05         try{
06             var evt = document.createEvent('Event');
07             evt.initEvent('click',true,true);
08             el.dispatchEvent(evt);
09         }catch(e){alert(e)};       
10     }
11 }

特性判断也比浏览器判断有更好的前瞻性,比如Safari/Chrome在后续版本中实现了非input/button元素的click方法,那么特性判断的函数仍然可以向下兼容。

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览