What's "This" in JavaScript Onclick

Passing 'this' to an onclick event

The code that you have would work, but is executed from the global context, which means that this refers to the global object.

<script type="text/javascript">
var foo = function(param) {
    param.innerHTML = "Not a button";
};
</script>
<button onclick="foo(this)" id="bar">Button</button>

You can also use the non-inline alternative, which attached to and executed from the specific element context which allows you to access the element from this.

<script type="text/javascript">
document.getElementById('bar').onclick = function() {
    this.innerHTML = "Not a button";
};
</script>
<button id="bar">Button</button>

What's the difference between onClick ={ () = function()} and onClick = {function()}?

In first one:

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

This is arrow function and it will trigger only onClick of the button.

In second one:

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

This is a normal function call , which calls the method as soon the rendering of the component happens.

How does this in onClick work?

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 */"

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 vard 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

How do I find out what javascript function is being called by an object's onclick event?

You can do like this

With Javascript Demo on JsFiddle

div1 = document.getElementById('div1');

alert(div1.getAttribute("onclick"));

With jQuery Demo on JsFiddle

<div id="div1" onclick="myfun();" >

alert($('#div1').attr('onclick'));

onClick to get the ID of the clicked button

You need to send the ID as the function parameters. Do it like this:

<button id="1" onClick="reply_click(this.id)">B1</button><button id="2" onClick="reply_click(this.id)">B2</button><button id="3" onClick="reply_click(this.id)">B3</button>    <script type="text/javascript">  function reply_click(clicked_id)  {      alert(clicked_id);  }</script>

What wrong with .onclick() event?

onClick() is a function. The event handler is the argument to the function.

$w.onReady(() => {
  $w('#button2').onClick(() => {
    wixWindow.openLightbox("Conditions générales de vente");
  });
});