Element binding click event method

The easiest way is to use the click method:

<input  type="button" value="BUTTON" onclick="alert(1)"/>
<script>
 var btn = ('btn');
 ();
</script>

All browsers pop up 1. But what if you change input to div?

<div  style="background:gold;width:50px;height:50px;" onclick="alert(2)"></div>
<script>
 var d1 = ('d1');
 ();
</script>

There is no 2 popup in Safari/Chrome this time. That is, not all elements in all browsers support the click method. In fact, only the input/button element has a click method in all browsers.
The above events are all directly added to the html attribute (inline events). Can the click method trigger an event added with /addEventListener/attachEvent?

<input  type="button" value="BUTTON 1"/>
<input  type="button" value="BUTTON 2"/>
<script>
 var addListener =  ?
   function(el, type, fn) { (type, fn, false); } :
   function(el, type, fn) { ('on' + type, fn); };
 var btn1 = ('btn1');
 var btn2 = ('btn2');
  = function(){
   alert(3);
 };
 addListener(btn2, 'click', function() {alert(4)});
 ();
 ();
</script>

All browsers pop up 3 and 4 in turn. Description elements that support click methods can be triggered whether using inline or addEventListener/attachEvent.

The click method has been written to the HTML5 draft if Safari/Chrome completes the implementation of the remaining elements (non-input/button). Then simulated clicking will be very simple, and the click method will be called directly. Firefox has just implemented the click method for non-input/button elements in version 5, which is a bit behind.
Since click in Safari/Chrome is not available, we use dispatchEvent to implement it.

<input  type="button" value="BUTTON 1" onclick="alert(1)"/>
<input  type="button" value="BUTTON 2" onclick="alert(2)"/>
<div  style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div>
<script>
 function dispatch(el, type){
   try{
     var evt = ('Event');
     (type,true,true);
     (evt);
   }catch(e){alert(e)};
 }
 var btn1 = ('btn1');
 var btn2 = ('btn2');  
 var d1 = ('d1');
 dispatch(btn1, 'click');
 dispatch(btn2, 'click');
 dispatch(d1, 'click');
</script>

1, 2, 3 pops up in turn. It can also be triggered if it is replaced by other events. There is also a fireEvent in IE to actively trigger events. Of course, if it is a click event, it is better to use click. Non-click events can only be triggered through fireEvent.

Finally, I give my triggerClick method, which is the implementation method to determine the browser and the nodeName. The basis is that Safari/Chrome does not support click methods that are non-input/button elements.

function triggerClick( el ) {
 var nodeName = ,
   safari_chrome = /webkit/.test(());
 if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) {
   try{
     var evt = ('Event');
     ('click',true,true);
     (evt);
   }catch(e){alert(e)};
 }else{
   ();
 }
}

The above implementation method allows you to understand the differences in browsers, but the implementation is actually a bit wordy. Just directly judge whether the element has a click method. Non-input/button elements in Safari/Chrome do not have a click method, and return undefined.

function triggerClick( el ) {
 if() {
   ();
 }else{
   try{
     var evt = ('Event');
     ('click',true,true);
     (evt);
   }catch(e){alert(e)};    
 }
}

Feature judgment is also better forward-looking than browser judgment. For example, Safari/Chrome implements a non-input/button element click method in subsequent versions, so the feature judgment function can still be backward compatible.

The above is all about this article. I hope you like it