Question

我正在尝试向document添加一些事件侦听器，但由于某种原因，它似乎永远不会触发click事件，因为永远不会调用回调：

function NotJquery(element) {
    this.element = element;

    return this;
}

NotJquery.prototype.eventFired = function(event, callback) {
    console.log('in NotJquery prototype');
    return function (event, callback) {
        element.addEventListener(event, callback, true);
    };
};

var $ = function(element) {
    return new NotJquery(element);
};

function Test() {
}

Test.prototype.addListener = function() {
    console.log('in Test prototype');
    $(document).eventFired('click', function() {
        console.log('click event fired');
    });
};

(function() {
    var test= new Test();
    test.addListener();
}());

两个消息：“在测试原型中”和“在NotJquery原型中”都记录在控制台中，但当我单击文档中的某个位置时，控制台中不会输出“click event fired”消息。我没看到我的代码有什么问题。有人有想法让它发挥作用吗？

http://jsfiddle.net/Nn3tZ/1/

Answer 1

element未在eventFired函数中定义（但这不是唯一的问题）。这是一个最小的更新：

NotJquery.prototype.eventFired = function(event, callback) {
    var self = this; // <== Change 1 of 2

    console.log('in NotJquery prototype');
    return function () {
        self.element.addEventListener(event, callback, true);
    //  ^-- Change 2 of 2
    };
};

与其他语言（Java，C＃）不同，当引用当前对象的属性时，this 不是可选的。另外，您在eventFired内创建的功能将没有正确的this，因此我将其作为self存放，然后在self内使用event生成的函数（它是闭包）。

另外，您将callback和eventFired传递给eventFired，但还在生成的函数上声明它们（对我来说一点都不清楚）为什么你在那里生成一个函数，所以你传递给{{1}}的函数永远不会被使用。

更多阅读（在我的贫血博客上）：

Answer 2

您的客户端代码需要这样的内容：

NotJquery.prototype.eventFired = function(event, callback) {
    this.element.addEventListener(event, callback, false);
};

工作演示：http://jsfiddle.net/Nn3tZ/2/

事件不会在我的代码中被解雇？

2 个答案: