元素绑定click点击事件方法

当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

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

1. <input id="btn" type="button" value="BUTTON" onclick="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;" onclick="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添加的事件吗?

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

1. <input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/> 
2. <input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/> 
3. <div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div> 
4. <script> 
5. function dispatch(el, type){ 
6. try{ 
7. var evt = document.createEvent('Event'); 
8. evt.initEvent(type,true,true); 
9. 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. </script> 

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

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

1. function triggerClick( el ) { 
2. var nodeName = el.nodeName, 
3. safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase()); 
4. if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) { 
5. try{ 
6. var evt = document.createEvent('Event'); 
7. evt.initEvent('click',true,true); 
8. el.dispatchEvent(evt); 
9. }catch(e){alert(e)}; 
10. }else{ 
11. el.click(); 
12. } 
13. } 

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

1. function triggerClick( el ) { 
2. if(el.click) { 
3. el.click(); 
4. }else{ 
5. try{ 
6. var evt = document.createEvent('Event'); 
7. evt.initEvent('click',true,true); 
8. el.dispatchEvent(evt); 
9. }catch(e){alert(e)};  
10. } 
11. } 

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

以上所述就是本文的全部内容了，希望大家能够喜欢