Copy from: "Understanding through JavaScript" page 88th
Let's take a look at an example:
<body>
<div onclick= "alert (' is a ' + this.tagname ')" >click me!</div>
</body>
When this HTML file is run, clicking the div pops up "This is a div". The This argument above is the DOM object itself that triggers the event.
In the case of static binding, we often make a small mistake by writing the event bindings in the following form:
<div onclick= "ClickMe" >click me!</div>
//Wrong, clickme with no parentheses behind it ()
The purpose of this method is to bind the onclick event of the <div> element to the ClickMe function, but the runtime prompts the "ClickMe undefined" error. Why can't you write it like that? This has to do with the principle of static binding events.
When we write down the onclick= "...", we can actually look at the following equivalent form:
Adiv.onclick = function () {...};
That is, the value of the event property of the tag, which is the quotation mark, will be considered a JavaScript code, and this code will become the code within an anonymous function that is the real event handler. Obviously, a separate "clickme" is not a valid JavaScript statement at all, so this is wrong.
Let's look at another form of static binding, which is not necessarily wrong, but sometimes it goes wrong:
<div onclick= "ClickMe ()" >click me!</div>//Not recommended, this is the global Window object rather than the DOM object itself
Again, it is equivalent to the following code:
Adiv.onclick = function () {ClickMe ()}; This is not the DOM object itself that triggers the event, but the global window object.
This anonymous function does not have any errors. Note, however, that the this parameter within the ClickMe function is treated as the DOM object itself that triggers the event, and there is a problem. This is not the DOM object itself that triggers the event, but the global window object.
Why is that so?
When the event is triggered, the browser invokes Adiv.onclick (), which is called the anonymous function. Obviously, the This parameter of the anonymous function will be the DOM object that triggers the event. And, only in the scope context of this anonymous function, the This parameter is the DOM object that responds to the event. When calling ClickMe () from this anonymous function, this is not passed to the ClickMe function. When the scope jumps into the ClickMe function, this is the default Window object. So, in this case, you don't get the DOM object that triggers the event.
So how do you write a static binding event?
Obviously, the first type of writing is definitely not. The second formulation is also entirely feasible for those who do not care about this parameter, or DOM objects that do not need to determine the current response event. If you want the event-handling code to know who the current DOM object is, you can define an argument to the event handler and bring the current this in. As shown below:
<div onclick= "ClickMe (This)" >click me!</div>//recommended, this is the DOM object itself
You can also use the call or Apply method of a function to pass the default this parameter, as follows:
<div onclick= "Clickme.call (This)" >click me!</div>//Recommended , this is the DOM object itself
Therefore, it is recommended to use the following two methods for static event binding.
