In JS, the question about whether the name of the event processing function is enclosed by parentheses is displayed. The js function name

In JS, the question about whether the name of the event processing function is enclosed by parentheses is displayed. The js function name

Today I will summarize a small detail about the event handler. First, let's review some concepts of event processing.

Event Processing (event binding) in JS triggers certain events. There are two common forms: DOM Level 0 and DOM Level 2. The biggest difference between the two methods is that level 0 event processing of DOM can only be used for event bubbling, while Level 2 event processing of DOM can support event bubbling and event capturing by setting the third parameter.

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

<! -- Method 1 --> <div onclick = "fun1 (); fun2 ('World! '); "> </Div> <! -- Method 2 --> <div id = "a"> click me </div> <script> var a = document. getElementById ("a");. onclick = fun1; // method 2 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 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 handler function, but adds the function as an event listener as follows. It can also bind multiple handler functions without overwriting. However, this method is compatible with browsers, and must be replaced by the attachEvent method in IE.

A. addEventListener ("click", fun1, false); // event bubbling a. addEventListener ("click", anotherFun, false); // The event will not be overwritten and will be executed.

After a brief review, let's get down to the point. I wonder if you have noticed a confusing little detail during the review. When referencing a function, the function name is followed by parentheses, sometimes, no parentheses are added. How does this affect the running of the program? The following is a summary of my understanding.

The first step is to add brackets. You may often write "fun1 ();" in the program. That's right. Adding brackets behind the function name indicates that the function is executed immediately, this value is obtained if a return value exists in the function. If this is used more often, you may get used to writing in all the places where the function is called, such as the previously mentioned event processing function. However, if you do this, it may cause some situations of losing control. For example, if you want to execute a function only when you click an element, you can see that the function is executed from the very beginning. You can find that the DOM0 method and DOM2-level event processing functions used in the preceding example do not add brackets behind the function name, because this situation is avoided. If you add parentheses, this function fun1 will be immediately triggered for execution.

Why is there a bracket in the DOM0 method? That is because the quotation marks in the event attribute of the tag are directly executed as js statements, and brackets are added to ensure that the function is called and executed. However, because an event is bound with an element tag, the execution time is controlled when the tag is clicked.

What if I want to execute the function immediately without the function name? That is, to execute anonymous function expressions immediately. This mode is very common. Let's see if its ass is followed by an instant parentheses? Note that the parentheses enclosed in the entire function body in this IIFE form limit the scope. For more information about children's shoes that interest IIFE, see the relevant materials.

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

Now let's try again without parentheses. we mentioned that without parentheses, we can avoid losing control. It is because only the function name is passed to the event, which is equivalent to passing the function pointer (that is, the entry address of the function) to the element event. The advantage of doing so is that you can find the function and execute it as needed. In a metaphor, when you meet your friend and add parentheses, your friend immediately appears in front of you, no matter whether you are busy at the time, there is a kind of unpleasant feeling. Without parentheses, It is equivalent that your friend tells you where his family is. When you need him, he will come to him, this is really a close friend. Therefore, most event bindings only pass a function pointer to the event, that is, the function name.

At this time, there is another problem. As mentioned above, there are no parameter functions. What if there is a function like fun2 in the code example? Can we only use the DOM0 method? Of course, it is no. Try not to use the DOM0 method, which does not conform to the principle of structure and behavior separation. In this case, the anonymous function is used, as shown in the following code. If you have any good suggestions, please share them with us ~

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

The above is my summary. please correct me if you have any mistakes. Thank you! I would like to thank Chen Tong shoes, a learning partner, for keeping me informed of this ignored detail.

The above is a question about whether the event processing function name is enclosed in brackets in Javascript. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!