Questions about whether there are parentheses after the event processing function name in JS

Today I summarize a small detail about event handlers. First, let’s review some concepts of event processing.

　Event processing (event binding) in JS is to let some or certain events trigger certain activities. There are two common forms, namely DOM Level 0 and DOM Level 2. The biggest difference between these two methods is that DOM level 0 event processing can only be used for event bubbling, while DOM level 2 event processing can support event bubbling and event capture respectively by setting the third parameter.

　 DOM level 0 event processing generally assigns a function to an event handler directly. You can assign an event handler directly to the element, as shown in method 1; you can also assign the function to the event handler in the script. , as shown in method two.

<!--方式一-->
<div onclick="fun1();fun2(&#39;world!&#39;);"></div>
<!--方式二-->
<div id="a">点我</div>
<script>
var a=document.getElementById("a");
a.onclick=fun1; //方式二
function fun1(){
alert("hello!");
}
function fun2(cc){
alert(cc);
}
</script>

The difference between the two methods is also shown in the above example. The first method can bind multiple processing functions at the same time, but please note that it must be a global function, otherwise a Reference error will be thrown. The second method can only bind one processing function at a time, otherwise the new function will overwrite the old function.

　 DOM level 2 event processing does not directly bind the processing function, but adds the function as an event listener as follows. It can also bind multiple processing functions without overwriting. However, this method has browser compatibility issues, and the attachEvent method must be used instead under IE.

a.addEventListener("click",fun1,false); //事件冒泡
a.addEventListener("click",anotherFun,false); //不会覆盖上一事件，均被执行

That’s it for a brief review, let’s get back to the topic. I wonder if you have noticed a confusing little detail during the review process, that is, when referencing a function, sometimes parentheses are added after the function name. without adding parentheses. How does this affect the operation of the program? I have briefly summarized the following based on my own understanding after consulting the information.

The first thing is to add parentheses. You may often write "fun1();" in a program. Yes, adding parentheses after the function name means executing the function immediately. If the return value exists in the function memory, the value will be obtained. If you use this a lot, you may get used to writing it like this in all places where functions are called, such as the event handling function mentioned before. However, if you do this it can cause some out of control situations. For example, you obviously only want to execute a function when you click on an element, but you find that the function is executed at the beginning. You can find that the DOM0 mode 2 and DOM2 level event processing functions used in the above example do not add parentheses after the function name, the reason is to avoid this situation. If you add parentheses, the function fun1 will be triggered and executed immediately.

Then why are there brackets in DOM0 method one? That's because the quotes between the tag's event attributes will be directly executed as js statements. Only by adding parentheses can the function be called and executed. However, since the event is bound using an element tag, the timing of execution is controlled to be triggered when the tag is clicked.

　What if there is no function name and you want to execute it immediately? That is, the anonymous function expression is executed immediately. This mode is very common. Let’s see if there is an immediate execution parentheses behind it? Note that the parentheses surrounding the entire function body in this IIFE form limit the scope. Children's shoes who are specifically interested in IIFE can check the relevant information. I will not go into details here.

(function(){
//do something...
})();

Now let’s analyze the one without parentheses. We mentioned earlier that not adding parentheses can avoid getting out of control. This is because passing only the function name to the event is equivalent to passing the function pointer (that is, the entry address of this function) to the element event. The advantage of this is that the function can be found and executed when needed. To use a small metaphor, when you meet your friend, when you add parentheses, your friend will immediately appear in front of you. He doesn't care whether you are busy at the time, and there is an uninvited and unpleasant feeling; Not adding parentheses is equivalent to your friend telling you where his home is and coming to him when you need him. This is really a considerate friend. Therefore, most event bindings just pass a function pointer, which is the function name, to the event.

There is another question at this time. The functions explained before are all parameterless functions. What if it is a parameterized function like fun2 in the code example? Can we only use DOM0 method one? Of course it is negative. Try not to use DOM0 mode one, which does not comply with the principle of separation of structure and behavior. Generally, this situation is solved by using anonymous functions, as shown in the following code. If you have any good suggestions, you can leave a message and share them~

//DOM Level 0
a.onclick=function(){
fun2("world!");
};
//DOM Level 2
a.addEventListener("click",function(){fun2("world!");},false);

​​​