“this” inside event handler from HTML attribute

Question

I thought I understood wel the \"this\" keyword until I saw this code :

    clic1

    

        

Answer 1

TLDR:

go is not the event handler of the first button. The event handler is an anonymous function generated by the HTML parser. In the example, the generated handler just happens to call go.

---

JavaScript code provided in HTML for an onEventName attribute is compiled into a function of form

function(event) {
    // code written in the attribute value
}

Functions generated by the parser in this way have a rather strange scope chain which includes the element the generated handler is a property of, any outer form element the element is within, and the document object, at least. Reasons for the scope chain date back to before the DOM was standardized. Older IE releases provided window.event instead of the event parameter.

So the first button

 clic1

in current browsers generates the button's onclick handler as:

 function( event) {
     go()
 }

• the onclick handler is the function taking the event parameter. It is called with a this value of the button.
• go is an ordinary function call - the this value of the caller has not been applied. You could, say, pass on this as a parameter by calling go(this) if you wanted to.
• go was declared using the function keyword and by default has a this value of the global object.

In the second example, you compile an anonymous function expression normally (not using the HTML parser) and attach it directly to the second button element.`

• the attached function is called with the button as its this value which can be logged to the console.

• the attached function does not have a wierdo scope chain.