无法将事件传递给addEventListener:closure问题

Question

这个让我疯狂......我有一个循环,它为SVG对象添加一个事件监听器.为了争论,对象是一个小圆圈,我必须为10个圆圈中的每一个添加mouseover和mouseout事件.

我的第一个问题是标准的闭包范围 - 因为所有的监听器都添加在同一个循环中,它们都看到了循环变量的相同无效值.我想,我可以解决这个问题,但第二个问题是我必须将"事件"传递给听众,而我找不到任何方法同时解决这两个问题.

我试过各种版本:

for(month = 0; month < nMonths; month++) {
   ...
   shape.addEventListener(
     "mouseover", 
     (function(event, index) { popup_on(event, foo, index); })(event, month),
     false);
   group.appendChild(shape);
}

这个特殊的版本给了'事件没有定义'.popup_on是真正的处理程序,必须得到event和当前的值month.知道我应该怎么做吗？谢谢.

Answer 1

该事件将被传递给你的函数自动 -只是将其作为第一个参数传递给函数addEventListener.此外,false是捕获参数的默认值.

(function() {
    var i = month;
    shape.addEventListener("mouseover", function(e) { popup_on(e, foo, i); });
})();

另外,你foo在事件回调中被关闭了吗？如果没有,你可以用它做同样的事情

(function() {
    var i = month;
    var f = foo;
    shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); });
})();

如果所有这些局部变量都变得烦人,你可以使它们参数可能使事情变得更加整洁

(function(i, f) {
    shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); });
})(month, foo);