What's "this" in JavaScript onclick?

Question

In the case you are asking about, this represents the HTML DOM element.

So it would be the <a> element that was clicked on.

It refers to the element in the DOM to which the onclick attribute belongs:

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

(This example uses jQuery.)

The value of event handler attributes such as onclick should just be JavaScript, without any "javascript:" prefix. The javascript: pseudo-protocol is used in a URL, for example:

<a href="javascript:func(this)">here</a>

You should use the onclick="func(this)" form in preference to this though. Also note that in my example above using the javascript: pseudo-protocol "this" will refer to the window object rather than the <a> element.

In JavaScript this refers to the element containing the action. For example, if you have a function called hide():

function hide(element){
   element.style.display = 'none';
}

Calling hide with this will hide the element. It returns only the element clicked, even if it is similar to other elements in the DOM.

For example, you may have this clicking a number in the HTML below will only hide the bullet point clicked.

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>

Here (this) is a object which contains all features/properties of the dom element. you can see by

console.log(this);

This will display all attributes properties of the dom element with hierarchy. You can manipulate the dom element by this.

Also describe on the below link:-

http://www.quirksmode.org/js/this.html

keyword this in addEventListener event

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});

li {
  cursor: pointer;
}

<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>

When calling a function, the word "this" is a reference to the object that called the function.

In your example, it is a reference to the anchor element. At the other end, the function call then access member variables of the element through the parameter that was passed.