Question

我想在插件的内部和外部调用我的插件上的click事件。我的意思是如果我添加

clicked: function() { console.log("called from outside"); },

作为插件实例的一个选项，插件将执行自己的函数，然后从选项中调用自定义函数。这是代码：

(function() {
    // Define our constructor
    this.Test = function() {
        this.options = arguments[0];
    }

    Test.prototype.make = function(){
        this.SelectArea = document.getElementById(this.options.id);
        this.SelectArea.addEventListener('click', function(){

            // first execute scripts to this function
            console.log("calling from inside");

            // then execute options clicked function
            this.options.clicked;
        });
    }
}());

var Test = new Test({
    id: 'testId',
    clicked: function(){
        console.log("calling from outside");
    }
});
Test.make();

但是上面的代码失败了，它只会触发一次。选项中的clicked事件函数未执行。

Answer 1

this.options.clicked;

您根本没有在此处调用此功能，您只是引用它。您需要添加括号来调用它：

this.options.clicked();

但还有另一个问题。在click事件回调中，this是DOM元素，而不是Test实例。您需要保存对它的引用，并将其称为：

Test.prototype.make = function(){
    this.SelectArea = document.getElementById(this.options.id);
    var clickHandler = this.options.clicked;
    this.SelectArea.addEventListener('click', function(){

        // first execute scripts to this function
        console.log("calling from inside");

        // then execute options clicked function
        clickHandler(); // here
    });
}

而且，为了更好，您可能希望传递事件变量和DOM上下文，以防处理程序想要使用它：

clickHandler.apply(this, arguments);

Answer 2

您需要调用this.options.clicked中存储的函数。我相信这一点：

// then execute options clicked function
        this.options.clicked;

应该是：

// then execute options clicked function
        this.options.clicked();

因为this.options.clicked是一个函数。现在正在引用该函数，但表达式被丢弃，因此没有任何反应。

如何将事件两次绑定到javascript插件

2 个答案: