元素绑定click点击事件方法

前端技术 2023/09/08 JavaScript

最简单的莫过于使用click方法：

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

所有浏览器都弹出了1。但是如果把input换成div呢？

<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添加的事件吗？

<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来实现了。

<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方法。

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。

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方法，那么特性判断的函数仍然可以向下兼容。

以上所述就是本文的全部内容了，希望大家能够喜欢

本文地址：https://www.stayed.cn/item/20912

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案