最簡單的莫過於使用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添加的事件嗎？
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 |
</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" onclick="alert(1)"/> |
02 |
<input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/> |
03 |
<div id="d1" style="background:gold;width:50px;height:50px;"onclick="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 |
</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方法，那么特性判斷的函數仍然可以向下兼容。