How does “this” in onClick work?

Question

I'm new to javascript. I'm curious how does the browser makes an onClick attribute work. You have this in a html:

<button id="1" onClick="reply_click(this.id)">B1</button>

what does a browser do to execute a the (allways javascript?) script function?

I guess this is something like eval-ing the string that is given to the onClick.

But I have doubts like these: What is the applying standard here? How does the browser know which script language to use? How is this filled up by the javascript engine? In what context does the script execute? What happens with a return value? What do I want to read to know what can I rely on when working with these attributes?

Can you help me to understand what's going on?

Answer 1

When you set an onclick attribute; the browser takes the reference to the node you've set it on, let's call this reference button , and then does the transfomation

onclick="/* code */"

to

button.onclick = function (event) {eval(/* code */);};

When a click event is then tirggered, the function can be thought of as being invoked like this

button.onclick.call(button, click_event);

Giving the onclick the context of button , and hence this is button . It is wrapped in it's own function so if something is var d it will not be set in the global scope.

---

What happens with a return value?

Returning false is the equivalent of calling event.preventDefault(); , exact behaviour is described here .

---

How does the browser know which script language to use?

Assumes JavaScript unless explicitly stated otherwise

---

What do I want to read to know what can I rely on when working with these attributes?

Don't learn these HTML attributes, they are dated, can be dangerous and mix your HTML and JavaScript together. Instead learn to use EventTarget.addEventListener

Answer 2

Phew, that's a lot of questions!

Q. what does a browser do to execute a the (allways javascript?) script function

Q. How does the browser know which script language to use

A. Modern browsers always assume Javascript, unless it is prefixed with a label, eg onclick="vbscript:alert('Hello World!');"

Q. How is this filled up by the javascript engine

A. this always refers to the element on which the onclick was added, in this case the button element

Q. In what context does the script execute

A. The script executes at window scope.

Q. What happens with a return value

A. The return value determines whether or not the browser should continue executing the default code for this element. If the button is a submit button and you return false , your form will not be posted

Q. What do I want to read to know what can I rely on when working with these attributes

A. A Javascript book. Have a look at the top Javascript books on Amazon.

Answer 3

Browsers assume JavaScript, basically because although it could in theory be any scripting language, in practice JavaScript has won.

It executes the code in onclick with this being the element for which the click event was triggered.

The return value is used exactly the same way as for element.onclick = function () {...} .

In fact, the whole thing works equivalently to:

var element = document.getElementById('1');
element.onclick = new Function(element.getAttribute('onclick'));

Answer 4

How does the browser know which script language to use?

You need to write out <script> tags inorder to write script. The default script is JavaScript if no script type is implied. If you're using various JavaScript libraries or similar like jQuery then you need to use $ or jQuery infront of your calls.

What happens with a return value?

There is no real return value. It basically is what happens in the function you call with your onClick.