“The Good Parts”中的 EventListener 示例答案

【问题标题】：EventListener Example from "The Good Parts"“The Good Parts”中的 EventListener 示例
【发布时间】：2012-04-29 13:36:01
【问题描述】：

我是 JavaScript 新手。我需要添加一个 EventListener 到 Node.on('click', foo);我的第一次尝试当然是失败了：

var i = 0;
Y.one('#btnDel' + i).on('click', function () {
    Y.one('#part' + i).remove(true);
});

我记得在“JavaScript: The Good Parts”一书中有类似的东西，我找到了它（第 39 页）：

var add_the_handlers = function (nodes) {
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function (i) {
            return function (e) {
                alert(e);
            };
         }(i);
     }
};

但这也不起作用。通过第二次（更多 21 次）查看，我有一些问题：您返回一个需要参数 'e' 的内部函数，但内部函数没有调用 'i' - 只是外部函数。我“修复”了这个问题，现在它适用于 YUI：

 Y.one('#btnDel' + i).on('click', function (i) {
    return function () {
        Y.one('#part' + i).remove(true);
    }
}(i));

在on the errata pakge，也有人写了这个“修复”。但是作者（Crockford！）仍然坚持书本版本。有什么我监督的吗？我的版本适用于我的情况只是巧合？

ps：当我在我的匿名返回函数中将i 绑定到this.i 时，这将是全局对象吗？

pps：对不起，我的英语很棒。 :|

【问题讨论】：

标签： javascript yui

【解决方案1】：

...或使用事件委托：http://yuilibrary.com/yui/docs/node/node-evt-delegation.html。

1) 您最终将只有一个事件侦听器，该事件侦听器将委托给所需的元素（在您的情况下为按钮）， 2）它会更好地处理动态内容。如果您稍后添加另一个元素（例如按钮），则不必将另一个侦听器附加到它。它已由委托处理。

...您所指的示例（第 39 页）是一个典型的闭包，对于大多数新手来说都是一个问题。所以不用担心。您自己想出了解决方案，令人印象深刻。

【讨论】：

【解决方案2】：

尝试使用类选择器收集所有按钮。然后你可以简单地使用'each'函数：

Y.all(".buttonClassName").each(function (oneButtonNode) {
    oneButtonNode.on("click", function (event) {
        //do something
        alert(this.get("id"));
    })
});

YUI3 文档：http://yuilibrary.com/yui/docs/node/#nodelist

【讨论】：

【解决方案3】：

因为 i 是在循环之外定义的，但在点击发生之前不会在订阅者函数中进行评估。同样的 i 被递增直到它等于 node.length。所以当点击发生时，我是node.length。这是 JavaScript 新手的常见错误。详情请参阅http://james.padolsey.com/javascript/closures-in-javascript/。

至于解决方案，使用事件委托：http://yuilibrary.com/yui/docs/event/delegation.html

【讨论】：