元素绑定click点击事件方法
最简单的莫过于使用click方法：
<inputid="btn"type="button"value="BUTTON"onclick="alert(1)"/>
<script>
varbtn=document.getElementById('btn');
btn.click();
</script>
所有浏览器都弹出了1。但是如果把input换成div呢？
<divid="d1"style="background:gold;width:50px;height:50px;"onclick="alert(2)"></div>
<script>
vard1=document.getElementById('d1');
d1.click();
</script>
这次Safari/Chrome中没有弹出2。即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。
以上的事件都是直接添加在html属性中的（内联事件）。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的事件吗？
<inputid="btn1"type="button"value="BUTTON1"/>
<inputid="btn2"type="button"value="BUTTON2"/>
<script>
varaddListener=window.addEventListener?
function(el,type,fn){el.addEventListener(type,fn,false);}:
function(el,type,fn){el.attachEvent('on'+type,fn);};
varbtn1=document.getElementById('btn1');
varbtn2=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来实现了。
<inputid="btn1"type="button"value="BUTTON1"onclick="alert(1)"/>
<inputid="btn2"type="button"value="BUTTON2"onclick="alert(2)"/>
<divid="d1"style="background:gold;width:50px;height:50px;"onclick="alert(3)"></div>
<script>
functiondispatch(el,type){
try{
varevt=document.createEvent('Event');
evt.initEvent(type,true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}
varbtn1=document.getElementById('btn1');
varbtn2=document.getElementById('btn2');
vard1=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方法。
functiontriggerClick(el){
varnodeName=el.nodeName,
safari_chrome=/webkit/.test(navigator.userAgent.toLowerCase());
if(safari_chrome&&(nodeName!='INPUT'||nodeName!='BUTTON')){
try{
varevt=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。
functiontriggerClick(el){
if(el.click){
el.click();
}else{
try{
varevt=document.createEvent('Event');
evt.initEvent('click',true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}
}
特性判断也比浏览器判断有更好的前瞻性，比如Safari/Chrome在后续版本中实现了非input/button元素的click方法，那么特性判断的函数仍然可以向下兼容。
以上所述就是本文的全部内容了，希望大家能够喜欢