最简单的莫过于使用click方法
1 | < input id = "btn" type = "button" value = "BUTTON" onclick = "alert(1)" /> |
3 | var btn = document.getElementById('btn'); |
所有浏览器都弹出了1。
把input换成div呢
1 | < div id = "d1" style = "background:gold;width:50px;height:50px;" onclick = "alert(2)" ></ div > |
3 | var d1 = document.getElementById('d1'); |
这次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" /> |
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(){ |
12 | addListener(btn2, 'click', function() {alert(4)}); |
所有浏览器都依次弹出了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 > |
05 | function dispatch(el, type){ |
07 | var evt = document.createEvent('Event'); |
08 | evt.initEvent(type,true,true); |
09 | el.dispatchEvent(evt); |
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'); |
依次弹出了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' )) { |
06 | var evt = document.createEvent( 'Event' ); |
07 | evt.initEvent( 'click' , true , true ); |
08 | el.dispatchEvent(evt); |
上面的实现方式让你能明白浏览器的差异,但实现其实有点罗嗦。直接判断元素是否具有click方法即可,Safari/Chrome中非input/button元素没有click方法,返回undefined。
01 | function triggerClick( el ) { |
06 | var evt = document.createEvent( 'Event' ); |
07 | evt.initEvent( 'click' , true , true ); |
08 | el.dispatchEvent(evt); |
特性判断也比浏览器判断有更好的前瞻性,比如Safari/Chrome在后续版本中实现了非input/button元素的click方法,那么特性判断的函数仍然可以向下兼容。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。