Question

我是一个JavaScript新手。我需要向Node.on添加一个EventListener（'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，有人写了这个“修复”。但是作者（克罗克福德！）仍然坚持书本版。是否有我监督的事情 - 我的版本在我的案例中起作用只是巧合？

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

pps：对不起我的英语。：|

Answer 1

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

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

...你所指的例子（第39页）是一个典型的闭包，对大多数新人来说都是一个难题。所以不用担心。你已经找到了自己的解决方案，令人印象深刻。

Answer 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

Answer 3

因为i是在循环外定义的，但在单击发生之前不会在订阅者函数中进行评估。同样的i递增，直到它等于node.length。所以当点击发生时，我就是node.length。这对于刚接触JavaScript的开发人员来说是一个常见错误。有关正在进行的操作的详细信息，请参阅http://james.padolsey.com/javascript/closures-in-javascript/。

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

来自“好零件”的EventListener示例

3 个答案: