This one's driving me crazy... I have a loop which adds an event listener to an SVG object. The object is, for the sake of argument, a small circle, and I have to add mouseover and mouseout events for each of the 10 circles.
My first problem is the standard closure-scope thing - because all the listeners are added in the same loop, they all see the same invalid value of the loop variable. I can fix this, I think, but the second problem is that I have to pass 'event' to the listeners, and I can't find any way to fix both these issues simultaneously.
I've tried various versions of this:
for(month = 0; month < nMonths; month++) {
...
shape.addEventListener(
"mouseover",
(function(event, index) { popup_on(event, foo, index); })(event, month),
false);
group.appendChild(shape);
}
This particular version gives me 'event is not defined'. popup_on
is the real handler, and must get event
and the current value of month
. Any idea how I should be doing this? Thanks.
The "addEventListener is not a function" error occurs for multiple reasons: calling the method on an object that is not a valid DOM element. placing the JS script tag above the code that declares the DOM elements. misspelling the addEventListener method (it's case sensitive).
If you like to have it within listener, you must do something like: someObj. addEventListener("click", function(){ var newVar = someVar; some_function(someVar); }, false); and use newVar instead.
The event will be passed to your function automatically—just make it the first argument to the function you pass to addEventListener
. Also, false is the default value for the capture parameter.
(function() {
var i = month;
shape.addEventListener("mouseover", function(e) { popup_on(e, foo, i); });
})();
Also, are you ok with foo
being closed over in your event callback? If not, you could do the same thing with it
(function() {
var i = month;
var f = foo;
shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); });
})();
And if all these local variables are getting annoying, you can make them parameters to possibly make things a bit more tidy
(function(i, f) {
shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); });
})(month, foo);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With