From what has been said before, the special
advantage of this
is not yet obvious.
Indeed, inside the handler function, our
element will be available anyway - after
all, the variable elem
will be global
for our function func
:
let elem = document.querySelector('#elem');
elem.addEventListener('click', func);
function func() {
// elem variable with our element is available here
}
And, it is easy to figure out that the content
of this
and the content of the variable
elem
in our case are equal:
let elem = document.querySelector('#elem');
elem.addEventListener('click', func);
function func() {
console.log(elem === this); // shows true
}
What is the special advantage of this
?
It manifests itself when we have multiple
elements, and the same function is attached
to each.
Let's look at an example. Let's say we
have 3
buttons:
<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">
Get references to them in variables:
let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');
Bind the same function to these buttons:
button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);
And inside the function we will
display this.value
:
function func() {
console.log(this.value);
}
It turns out that we have three buttons.
Pressing each button will call the function
func
. In this case, with each click,
this
will contain a reference to the
button in which the event occurred.
That is, each press will output to the console
value
of the button that was pressed,
but this will be done by the same function
func
! That's the advantage of using
this
.
Given 5
paragraphs with some texts.
By clicking on any paragraph, write an
exclamation mark at the end of its text.
Given 3
inputs, in which some numbers
are written. On loss of focus in any of the
inputs, square the number standing in it.