在jQuery触发器上调用不正确的处理程序

Question

我在尝试注册和触发jQuery中的事件时遇到了一个奇怪的问题。我的示例代码存根是这样的：

events = {"changeMode": ["mode1"], "changeKeymap": ["keymap1"]} 
 

 
for(var event in events) { 
 
    var listeners = events[event]; 
 
    for (i=0; i<listeners.length; i++) 
 
    { 
 
    var listn = listeners[i] 
 
    console.log("Activate listener", listn, " For event: ", event); 
 
    $("#testing").on(event, function(e, d) { 
 
     console.log("Event: ", event); 
 
     console.log("Listener invoked is: ", listn); 
 
     console.log("Event which is passed is: ", e); 
 
     console.log("Data is: ", d); 
 
    }); 
 
    } 
 
} 
 

 
$("#testing").trigger("changeMode", "random data");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="testing"></div>

正如你所看到的，而我试图调用“changeMode”，即实际上得到调用是“changeKeymap”监听器。实际上，调用的监听器是最后一个被定义的监听器，所以我假设它以某种方式覆盖了其他监听器。 （我实际上有更大的代码，但基本上这就是我遇到的错误归结为什么）任何人都可以提出发生了什么事。

这里的jsfiddle：https://jsfiddle.net/7xyyggz8/

编辑：

事件发射是正确的乔尔的建议。然而，响应这个调用的监听器在某种程度上是不正确的。

编辑2：

更新小提琴和代码，使用瓦尔..仍然遇到了同样的问题

Answer 1

如果你仔细观察，你会发现changeMode确实解雇。深入研究jQuery对象，你会看到它被识别出来。它看起来不像被解雇的原因是你使用外部变量来标识名字。

这条线：

console.log("Listener invoked is: ", listn); 

使用listn变量，其最后一个值是changeKeymap。如果您将功能更改为：

var eventName = listn; 
console.log("Listener invoked is: ", eventName); 

它应按照您的预期报告。

注意：实际jQuery事件向下钻取的屏幕粘贴。

Answer 2

最终的问题想通了，是类似这样的：

JavaScript closure inside loops – simple practical example

这是在什么乔尔建议的方针。 Underscore的_.each（）函数和咖啡脚本的.... do block本身就是这样做的。