JavaScript - 动态创建事件侦听器

JavaScript - Dynamically Create Event Listeners

本文关键字：事件 侦听器 创建 动态 JavaScript      更新时间：2023-09-26

我正在这个项目中使用道场工具包。我有一个下拉按钮，它有一个作为孩子的菜单，然后有各种菜单项。由于这将是一个"活"的应用程序，菜单项将随着业务的增长而变化。我的目标是能够为 Menu 包含的所有菜单项创建事件侦听器。Dojo 提供了一个访问器函数 "getChildren(("，我用它来生成我想循环遍历的所有菜单项的对象。菜单项具有标签和 ID，我希望在选择该项时能够使用它们。(注意：按钮、菜单和菜单项由另一个脚本包含，但全局存储在名为 layout 的数组中，就像我将函数和变量附加到 main = [] 下面一样。

main = [];

require([
"dojo/dom","dojo/on","dojo/parser","dojo/json","dojo/domReady!"
], function(dom,on,parser,JSON) {
parser.parse();
console.log("Main Start");
//flags
//Listeners
var gpMenuChildren = layout.gpMenu.getChildren();
for (i in gpMenuChildren) {
    var id = gpMenuChildren[i].id;
    var label = gpMenuChildren[i].label;
    console.log(label);
    console.log(id);
    on(dom.byId(id),"click",function() {
        console.log("dom node w/ 'id' of " + id +" was clicked!");
        layout.gpButton.set("value",label);
        main.updateQueryStr();
    });
}
main.updateQueryStr = function updateQueryStr() {
    console.log("updateQueryStr called...");
    layout.cpCentTop.set("content", "Test updateQueryStr");
};

 console.log("Main End");
});

通过 console.log((，我可以确认各个 id 和标签是正确的，我们可以通过此方法成功地遍历子级。

这就是问题所在

事件侦听

器已成功连接到菜单列表中的每个项，但是侦听器的函数组件似乎每次都会覆盖，因此仅采用循环中最后一个子项的属性(id 和标签(。换句话说，单击每个菜单项时都会记录相同的 id 和标签值。

关于确保创建可以包含来自孩子的适当值的独立事件侦听器的任何想法？

提前感谢！

发生这种情况是因为变量的内容发生了变化。您可以使用this直接从对象中检索 id 和标签：

console.log("dom node w/ 'id' of " + this.id +" was clicked!");
        layout.gpButton.set("value",this.label);

能够通过简单地将变量从我的循环传递到外部函数中来解决闭包和作用域的问题，然后该函数对数据执行所需的操作(创建事件侦听器(。 

    main.createListener = function createListener (id,label) {
    console.log("createListener called...");
    on(dom.byId(id),"click", function () {
        console.log("dom node w/ 'id' of " + id +" and a label of " + label + " was clicked!");
        layout.gpButton.set("value",label);
        main.updateQueryStr(label);
        });
    };
    var gpMenuChildren = layout.gpMenu.getChildren();
    for (i in gpMenuChildren) {
        var id = gpMenuChildren[i].id;
        var label = gpMenuChildren[i].label;
        main.createListener(id,label);
    }
相关文章：