Also learned how to bind a click event to a DOM Element

The simplest way is to use the click method:

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

1 is displayed in all browsers. But what if I change input to div?

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

2 is not displayed in Safari/Chrome this time. That is, not all elements in all browsers support the click method. In fact, only the input/button elements have the click method in all browsers.

The preceding events are directly added to the html attributes (Inline events ). Can the click method trigger events added using 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>

All browsers pop up with 3, 4 in sequence. It indicates that elements that support the click method can be triggered by adding events in either inline mode or el. onXX or addEventListener/attachEvent.

The click method has been written into the HTML5 draft, If Safari/Chrome completes the implementation of the remaining elements (non-input/button ). It is very easy to simulate a click and call the click method directly. Firefox has just implemented the click method for non-input/button elements in version 5, which lags behind Safari/Chrome.

Since clicking in Safari/Chrome is not available, we use 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>

Pop up 1, 2, 3 in sequence. Other event addition methods can also be used. There is also a fireEvent in IE to actively trigger the event, of course, it is better to use click for a click event. Non-click events can only be triggered through fireEvent.

Finally, we provide my triggerClick Method to Determine the browser and nodeName. Safari/Chrome does not support the click method of non-input/button elements.

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();}}

The above implementation method allows you to understand the differences between browsers, but the implementation is actually a bit cool. You can directly determine whether an element has a click method. Safari/Chrome does not have a click method for non-input/button elements, and undefined is returned.

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)};}}

Feature judgment is more forward-looking than browser judgment. For example, Safari/Chrome has implemented the click method for non-input/button elements in subsequent versions, so the function of feature judgment can still be backward compatible.