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

Question

我想在插件内外调用我的插件的点击事件。我的意思是如果我添加

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中的函数。我相信这一点：

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

应该是：

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

因为this.options.clicked是一个函数。现在正在引用该函数，但丢弃了表达式，因此什么也没有发生。

Answer 2

this.options.clicked;

您在这里根本没有调用该函数，您只是在引用它。您需要添加括号才能调用它：

this.options.clicked();

但是还有一个问题。在点击事件回调中，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);

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

How to bind an event twice to a javascript plugin

javascript

javascript-events