在循环中分配的事件侦听器会触发所有事件

Question

Every object in the balls array is assigned an event listener that alerts the object's color, but when you click on just one, it activates all of them, alerting the color of every single object in it.

Fiddle , snippet (listen):

function listen(obj, map, event, callback) {
  map.addEventListener(event, function (e) {
    if (hasPoint(obj.getBounds() || obj, event.clientX, event.clientY)) {
      callback.call(obj, e);
    }
  });
}

Loop (handler assignment);

for (var b = 0; b < balls.length; b++) {
  (function(b) {
      listen(balls[b], map, 'click', function(e) {
        alert(this.color); // where `this` === balls[b]
      });
  }(b));
}

(note: #listen is contained in an external file on GitHub - utils.js)

How would I have each object only trigger its own event listener?

Answer 1

The external util.js is key here, the listen function looks like

function listen(obj, map, event, callback) {
  map.addEventListener(event, function (e) {
    if (hasPoint(obj.getBounds() || obj, event.clientX, event.clientY)) {
      callback.call(obj, e);
    }
  });
}

And you use it like

listen(balls[b], map, 'click', function(e) {
    alert(this.color); // where `this` === balls[b]
});

Note that event in the listen() function is the string click , not the actual event, that would be e , so you want to use e to get the coordinates

function listen(obj, map, event, callback) {
  map.addEventListener(event, function (e) {
    if (hasPoint(obj.getBounds() || obj, e.clientX, e.clientY)) {
      callback.call(obj, e);
    }
  });
}

And that solves the issue

FIDDLE