This question already has answers here:
"this" inside event handler from HTML attribute
(1 answer)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 3 years ago.
I can't quite get understand of this simple example:
<button onclick='clickHandler(this)'>test</button>
function clickHandler(el){
var a = this;
}
When clicking the button, el is mapped to HTML event listener. But, a=this called inside function gives me global window object. Why is this inside function body not a HTML event listener (in this case it's button).
Related
This question already has answers here:
addEventListener calls the function without me even asking it to
(5 answers)
Why is the method executed immediately when I use setTimeout?
(8 answers)
Closed 1 year ago.
I have a button which on click is supposed to execute the addEventListener function. On the callback function part I directly use a console.log.
<button id="btnTrans">Translate</button>
var buttonTranslate = document.querySelector("#btnTrans");
buttonTranslate.addEventListener("click", console.log("clicked"));
as soon as the DOM loads, "clicked" appears on the console. Shouldn't it wait for the event to happen first?
The console.log is immediately executed because it is not wrapped in a function. Wrap it in a function:
buttonTranslate.addEventListener("click", () => { console.log("clicked") });
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 4 years ago.
i have JS class that has method like this:
setupComponent() {
document.getElementById("message-input").addEventListener("keydown", this._onKeyPress);
document.getElementById("send-button").addEventListener("click", this._onSend);
}
Right under it, there are two methods:
_onKeyPress(event) {
if (event.code === "Enter") {
this._onSend();
}
}
_onSend() {
console.log("send");
}
My question is: why direct call from "click" eventListener works (it logs message), and this._onSend() method, called in _onKeyPress returns this._onSend is not a function.
Also using this._onSend() inside setupComponent() works.
Is this some kind of magic associated with eventListeners?
When a function is used as an event handler, its this is set to the element the event fired from this - JavaScript | MDN. So you cant expect your methods to be there, but you can bind your this to your function using Function.prototype.bind().
document.getElementById("message-input")
.addEventListener("keydown", this._onKeyPress.bind(this));
This question already has answers here:
Javascript "addEventListener" Event Fires on Page Load [duplicate]
(2 answers)
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 5 years ago.
My EventListener is calling the function before the click with this code... what's wrong with that line?
It was working fine when I had the function inside the parameter, but now that i'm calling it from there instead it's calling it prematurely before any click occurs.
divs[i].addEventListener('click', xopush(i), null);
It's calling a function with and argument passing to the function()... not an alert.
//Instead of EventListener I usually prefer to use...
divs[i].onclick = function() {
xopush(i);
}
... which is a answer to this. However, I was looking forward to using the eventListener so I could turn it off after 1 click on the element.
This question already has answers here:
Pass element ID to Javascript function
(5 answers)
How to pass the id of an element that triggers an `onclick` event to the event handling function
(7 answers)
Closed 7 years ago.
I am using tag, and I want to pass its id to function when users clicks on it, I am doing code in onclick event.
following is my html code;
<a class="color_2" id="1" onclick="ConfirmDelete()">Delete</a>
here I want to pass this is to ConfirmDelete() function.
You can just type onclick="ConfirmDelete(this.id) and it will be sent to your function.
and in function definition;
function ConfirmDelete(var_id)
{
alert (var_id);
}
This question already has answers here:
How does the "this" keyword in Javascript act within an object literal? [duplicate]
(4 answers)
Maintaining the value of 'this' when using event listener
(2 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 9 years ago.
var foo = {
data: "a",
print: function() {console.log(this.data)}
}
element.addEventListener("click", function(){foo.print()});
In this case context is foo object
element.addEventListener("click", foo.print);
When in this one it's element
Why is it so?
The value of this is determined by the way a function is called. In the first case, the "print" function is called via a property reference from the object "foo". Therefore, the value of this is a reference to that object.
In the second case, you've passed the reference to the "print" function to the system when setting up the event handler. Event handlers are invoked with this set to refer to the element involved in the event.
In your first example, the value of this in the anonymous function will also be a reference to the clicked element. You could transmit that to the "print" function if you wanted to:
element.addEventListener("click", function(){ foo.print.call(this); });
When you say
foo.print
you will be getting a reference to the function, but the function is actually attached to foo object which is lost by passing the foo.print. So, print becomes an unbound function. You can confirm this like this.
var a = foo.print;
a(); // `this` will be referring to global now
To avoid this, you should bind the function with the object, like this
element.addEventListener("click", foo.print.bind(foo));
Now we are making sure that the function is bound to the foo object. You can check this, like this
var a = foo.print.bind(foo);
a(); // a