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.
Related
This question already has answers here:
Javascript, addEventListener callback function executes immediately and only once? [duplicate]
(3 answers)
Closed 1 year ago.
I made a basic eventListener which creates an alert on button click. This one doesn't work (it calls the alert on the page load)
function handleClick(){
alert("hi!");
}
document.querySelector("button").addEventListener("click",handleClick());
this one works instead, but i don't understand why
document.querySelector("button").addEventListener("click",function(){
alert("hello");
});
with handleClick() you are executing the function when that statement is read. You need to pass in the function handleClick reference.
This:
document.querySelector("button").addEventListener("click",handleClick);
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:
"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).
This question already has answers here:
Why do I have to omit parentheses when passing a function as an argument?
(2 answers)
Closed 4 years ago.
I am new to javascript and unable to understand one concept-
Why don't we use parentheses in front of name of an external function, while calling it(that particular function) by addEventListener method, in JavaScript.
For Example-
.addEventListener('click', myExternalFunction);
and not-
.addEventListener('click', myExternalFunction());
Whenever you are adding Event Listeners in any of the language you provide the delegates / Function Pointers.
They are not the actual function call they just point to the function and when the event actually occurs it will call that particular function.
This is how Delegates / Function Pointers works.
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
addEventListener calls the function without me even asking it to
(5 answers)
Closed 5 years ago.
What i am trying to id attach addEventListener() to all the input fields so that every time a keyup event is activated so alert messages pop up for every input field
var inputs = document.querySelectorAll(".form-control");
for(var i=0;i<inputs.length;i++){
elem = inputs[i]
elem.addEventListener("keyup",alert(i))
}
this code does not work. it only works on page load. it only loops it one time
What actually happens in the line elem.addEventListener("keyup",alert(i)) is that the function-call alert(i) is executed and the return value of that function call is then added as an event listener. This obviously doesn't make sense, because 1. alert doesn't return anything and 2. you only want to execute it when the event happens.
What you actually seem to want to do is bind the function-call alert(i) itself to the event listener, not its return value.
You could assign the alert-function to the keyup event using elem.addEventListener("keyup",alert). But in that case you can't pass any arguments to it. If you want to do this, you can use Function.bind to create a new function from a function and a list of arguments.
elem.addEventListener("keyup", alert.bind(null, i))
If you need to support old browsers which do not support bind yet, this is an alternative syntax which generates an anonymous function as an event handler:
elem.addEventListener("keyup", function() {
alert(i);
})
There is, however, another issue with your code. Every event handler will have the same value for i. Check the question mentioned by Sterling Archer's comment on the question for a solution.