Javascript 通过解析for循环中的字符串来委派事件

可能重复：

最近我一直在研究JavaScript的一些更复杂的方面，其中之一就是设计模式和委托

我创建了一个包含2个键的对象，然后对其进行解析并将事件附加到主体上

我的问题是，似乎在for循环的任何迭代中都附加了最后一个函数。我很确定这是一个引用/范围复制（谢谢Shmidty）问题，但如果我错了，请纠正我

是否有任何方法可以解决我的问题，以便在不做太多更改的情况下正确地附加2个事件？（因为这是一个复杂的应用程序，我将其简化为手头的问题）

在上，请查看

.div1

的警报消息如何与

.div2

相同

var foo = {
    init: function() {

        var i = 0,
            keys = []
            self = this;

        for (var key in this) {
            keys.push(key);
        }

        for (i; i < keys.length; i++) {
            if (keys[i].match(/^on/i)) {
                var delegateFunc = keys[i].split(' | '),
                    event = delegateFunc[2],
                    selector = delegateFunc[1],
                    keyName = keys[i];

                console.log('###');
                console.log( 'selector: ' + selector );
                console.log( 'event: ' + event );
                console.log( 'function: ' + self[keyName] );

                $('body').on(event, selector, function(ev) {
                    self[keyName](ev, ev.target);
                });
            }
        }

    },

    'on | .div1 | click': function(ev, el) {
        alert('you clicked 1');
    },

    'on | .div2 | click': function(ev, el) {
        alert('you clicked 2');
    }
}

$(function() { foo.init(); });​

var foo={
init:function（）{
var i=0，
键=[]
self=这个；
for（此字段中的var键）{
按键。按（键）；
}
对于（i；i

---

需要更多的信息吗？请给我留言。干杯

经典收尾问题..

将for循环放入一个

（i；i{ （功能（锁定索引）{ 如果（键[lockedIndex].match（/^on/i））{ var delegateFunc=keys[lockedIndex].split（“|”）， event=delegateFunc[2]， 选择器=delegateFunc[1]， keyName=键[lockedIndex]； console.log（“####”）； log（'selector:'+selector）； console.log（'事件：'+事件）； log（'function:'+self[keyName]）； $（'body'）.on（事件、选择器、函数（ev）{ 自身[关键字名称]（ev，ev.目标）； }); } })(一) }

将其替换为以下代码：

            (function(keyName) {
                $('body').on(event, selector, function(ev) {
                    self[keyName](ev, ev.target);
                });
            })(keyName);

原因是JavaScript没有块作用域。因此，您的

var keyName

在每个循环中都是相同的变量，回调函数的闭包绑定的是该变量，而不是它当时的值。因此，一旦循环完成，变量将是所有回调函数中的最后一个值

---

通过添加以

keyName

为参数的立即执行函数，您可以创建一个新变量（函数参数），从而避免该问题。

keyName

在触发事件处理程序时已过时，您需要将其包装在一个新范围中：

(function(key) {
    $('body').on(event, selector, function(ev) {
        self[key](ev, ev.target);
    });
})(keyName);

---

@Shmidty你能解释一下你的意思而不是开玩笑地评论我的问题吗？我的意思是这个问题一天大概要问十几次。你能指出一个可以解决我问题的问题吗？他甚至不需要在他的案例中锁定索引

keyName

是罪魁祸首。感谢您为我提供的链接，请进行投票：）谢谢@ThiefMaster您的答案是所有答案中最快/最容易理解的答案。一旦我知道“自我执行”是一个误导性的术语，我会将其标记为已接受。“立即调用”更准确，因为函数不是自我感知的。还是天网变得有自我意识了？

            (function(keyName) {
                $('body').on(event, selector, function(ev) {
                    self[keyName](ev, ev.target);
                });
            })(keyName);

(function(key) {
    $('body').on(event, selector, function(ev) {
        self[key](ev, ev.target);
    });
})(keyName);