This question already has answers here:
Onclick event getting called automatically
(3 answers)
Closed 8 years ago.
I've created an iframe using javascript:
fr=document.createElement('iframe');
fr.src="www.example.com";
fr.onload=doSomething();
document.body.appendChild(fr);
problem is the onload part seems to be running before the iframe loads -
I get an error in the console (using chrome) about something undefined in the function (and it would be defined once the iframe loads), and when I check, it turns out the iframe was never even appended.
onload expects a function reference to call
fr.onload=doSomething;
When you assign doSomething() to the onload event handler, its return is called (which is undefined) and that is the error you see. This is also the reason why doSomething appears to run immediately (because it executes during the assignment).
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:
What is the difference between a function call and function reference?
(6 answers)
Closed 2 years ago.
Recently I started learning about JS, and I got stuck in the following issue:
I am trying to call a function "draw_point" when a "mousemove" event happens.
When trying the following, the code works as expected (the function gets called):
svg.on('mousemove', draw_point(true));
But when replacing the caller function like this, it stops working and I don't get any error messages to troubelshoot.
svg.on('mousemove', function () {
draw_point;
});
Any explanation of what is going on?
Both examples are wrong, but for different reasons. In the first, you're calling the functiondraw_point immediately and passing its return value to the .on call. In the second, you're creating an anonymous function that wraps draw_point, but you're not calling draw_point. This is legal because javascript allows empty statements like myVar; or 3;.
What you want to do is pass the function draw_point, but not call it. It will be called when the handler runs:
svg.on('mousemove', draw_point);
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 "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 an answer here:
`chrome.webRequest.onBeforeRequest.removeListener`? -- How to stop a chrome web listener
(1 answer)
Closed 6 years ago.
I have the following code in my Chrome extension to detect when windows are closed:
closeListener = chrome.windows.onRemoved.addListener(function(closed_window_id){
// something
}
How do I unset this such that the anonymous function does not fire? i.e. Something like:
chrome.windows.onRemoved.removeListener(closeListener)
ANSWER
Stephan/wOxxOms answer is correct. The function within the addListener cannot be anonymous and the removeListener syntax uses the function name (or a variable pointing to the function) to clear it.
Updated codepen: http://codepen.io/anon/pen/EgpNpz
After taking a look at your code, I see your problem. The function you put into the addListener is anonymous and needs to be set to a variable or become a named function.
function newListener() {
alert();
}
//This will add the listener
chrome.windows.onRemoved.addListener(newListener);
//This will remove it
chrome.windows.onRemoved.removeListener(newListener);