元素綁定click點擊事件方法

 　　當點擊元素時，會發生 click 事件。當鼠標指針停留在元素上方，然後按下並松開鼠標左鍵時，就會發生一次 click。click() 方法觸發 click 事件，或規定當發生 click 事件時運行的函數。

　　最簡單的莫過於使用click方法：

　　?

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

　　所有浏覽器都彈出了1。但是如果把input換成div呢?

　　?

1 2 3 4 5 <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添加的事件嗎?

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <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來實現了。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <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方法。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 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。

　　?

1 2 3 4 5 6 7 8 9 10 11 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方法，那麼特性判斷的函數仍然可以向下兼容。

　　以上所述就是本文的全部內容了，希望大家能夠喜歡