单击按钮之前调用JavaScript函数

Question

我有jsfiddle代码。 我的意思是我有一个Cal对象，该对象包含init函数和另一个称为Event对象。 在Event内部，我有两个函数init和show 。 我正在做的是调用Cal对象的init函数并在其中传递参数。 在此init函数内部，我将调用Event的init函数，并在此处传递相同的参数。 在此init函数内部，当用户单击.button链接（在控制台中显示param时，我在Event内部调用show函数。 但是，当我运行此代码时，在单击.button之前，它将在控制台中显示param 。 为什么以及如何使它工作，以便在单击.button时显示参数？

这是我的代码

var Cal = {
    init: function (param) {
        this.param = param;
        Cal.Event.init(this.param);
    },

    func: function () {},

    Event: {
        init: function (param) {
            $('.button').on('click', this.show(param));
        },

        show: function (param) {
            console.log(param);
        }
    }
}

Cal.init('para');

Answer 1

.on（）期望参数2是一个函数，而不是该函数的返回值

$('.button').on('click', function() {
    // Here this points to the button DOM object.
    Cal.Event.show(param)
});

Answer 2

在这行代码中：

init: function (param) {
    $('.button').on('click', this.show(param));
},

您正在调用 show函数，然后将其返回值传递给on ，因此它在您调用Cal.Event.init时运行。 你不给on代码时发生点击呼叫。 为此，将其放在事件处理程序函数中：

init: function (param) {
    $('.button').on('click', function() {
        Cal.Event.show(param);
    });
},

请注意，我改变了this以Cal.Event因为调用处理函数内， this将是该按钮，而不是一个参考Cal.Event 。

Answer 3

您立即调用this.show(param) 。 更改为此：

init: function (param) {
    $('.button').on('click', $.proxy(function() {
        this.show(param);
    }, this));
},

http://jsfiddle.net/9SLEX/3/