JavaScript function call inside the html tag

Question

As i understand when we invoke a method this contains reference to object which invoke this method. But what is an "object" and a "method" in the following case:

Consider html code snippet

<div id="parent">
 <input type="submit" id="submit" value="submit" onclick="doThis(this)"/>
</div>

where doThis() is JS function, such that

doThis(obj){
 obj.style.background="#ff00ff"
}

I know, that this will be contained reference to submit button, but i dont understand why.

• Raul Rene: What would you expect it to be?
• m59: Please stop using inline js. google.com/search?q=Why+is+inline+js+bad%3F
• Felix Kling: A great reference to learn basically everything about event handling: quirksmode.org/js/introevents.html.

Answer 1

See the HTML 5 specification:

When an event handler content attribute is set

...

create a function object (as defined in ECMAScript edition 5 section 13.2 Creating Function Objects)

...

Set the corresponding event handler to the aforementioned function

and

Process the Event object E as follows:

...

Invoke callback with one argument, the value of which is the Event object E, with the callback this value set to E's currentTarget.