模拟元素点击的几种方式
模拟元素点击的几种方式
最简单的莫过于使用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
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" 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
19</script>
依次弹出了1,2,3。换成其它事件添加方式亦可触发。
IE中还有个fireEvent去主动触发事件，当然如果是点击事件使用click更好。非点击事件则只能通过
fireEvent去触发了。
最后给出我的triggerClick方法，实现方式判断浏览器，判断nodeName。依据是Safari/Chrome不支持非
input/button元素的click方法。
01function 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。
01function 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方法，那么特性判断的函数仍然可以向下兼容。
转自http://www.cnblogs.com/snandy/archive/2011/08/02/2122496.html
