ansaurus

Question

Javascript variable scope in addEventListener anonymous function

Answer 1

+3 A:

The problem is that the event listeners and 'total' both exist in the same scope (init())

The event functions are always going to reference total within the init() scope, even if it is changed after the event functions are declared

To get around this, the event functions need to have a 'total' in their own scope which will not change. You can add another layer of scope using an anonymous function

For example:

(function (total) {
 div1.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));

total += 4;

(function (total) {
  div2.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));

The anonymous functions are passed init()'s current 'total' value as a parameter. This sets another 'total' to the anonymous function's scope, so it does not matter if init()'s total changes or not, because the event function will FIRST reference the anonymous function's scope.

Edit:

Also, you need to place a semicolon after the closing brace of the helper function, otherwise the script will complain that 'event' is undefined.

var helper = function(event, id)
{
  if (event.stopPropagation) event.stopPropagation();
  if (event.preventDefault) event.preventDefault();

  alert('id='+id);
};

Matt 2009-11-22 20:26:24

Ahh. So effectively total is becoming like a variable pointer, much like in C++ variable*?

Gary Green 2009-11-22 21:03:19

Actually, it's being copied into a local scope. If it were a pointer, then it would change both inside and outside of scope, which would bring you back to your original problem.

Matt 2009-11-22 21:34:19

@Gary Matt's example is correct, here's a little terminology for you. You were running into your specific problem because of something known as "closure" (http://www.jibbering.com/faq/faq_notes/closures.html), which is a great and powerful feature of JavaScript. What Matt has shown you is how to get around the closure property (which sometimes gets in the way as you have seen) using anonymous functions and a technique known as currying. See http://ejohn.org/blog/partial-functions-in-javascript/ and http://stackoverflow.com/questions/1413916/.

Justin Johnson 2009-11-22 21:57:31

Answer 2

+1 A:

It's almost the same but i think it will be better div1.addEventListener('click', function(t){ return function(event) { helper(event, t); }}(total), false);

instead of

(function (total) { div2.addEventListener('click', function(event) { helper(event, total); }, false); }(total));

m4roo 2009-11-22 21:19:09

ansaurus

tags:

views:

answers:

Javascript variable scope in addEventListener anonymous function

related questions