Question

好吧，我是javascript的OOP新手，我一直在改变我的一些旧代码来制作可重复使用的代码。我决定将它们而不是一些内联代码转换成一些javascript类。
所以这是我的班级：

    function TreeStructure(psi, csi, csc, kwargs) {
        this.parentSelectorId       = psi;
        this.childrenSelectorId     = csi;
        this.childrenSelectorClass  = csc;

        kwargs = (typeof kwargs === "undefined") ? 'NoOptionalArguments' : kwargs;

        // First Question

        $('#' + this.parentSelectorId).click(this.parentSelectHandler());

        // Second Question 
        $('#' + this.parentSelectorId).on('click', this.parentSelectHandler(e));        
    }; 

    TreeStructure.prototype.parentSelectHandler = function () {
        alert("Why is it called after page loads ?!?
                       it's attached to a click handler   huh?");    
    }

该课程的用法：

    $(document).ready(function(){
         tree = new TreeStructure('blahId', 'blahId', 'blahClass');
    });

但是在运行时，会发生意外事件（对我来说）。所以这是我的两个问题：
1 - 为什么在页面加载后调用parentSelectHandler函数？（我认为在单击选择器后会调用预期的行为）
2 - 在jquery事件处理程序中，我可以获取事件并将其传递给事件处理函数，但是当我尝试传递parentSelectHandler时，参数'e'，它表示它没有定义。

所以有人可以帮助我吗？感谢

Answer 1

正在执行，因为您正在执行，并随后将其返回值设置为回调，而不是将其自身设置为回调

$('#' + this.parentSelectorId).on('click', this.parentSelectHandler(e));

应该是

$('#' + this.parentSelectorId).on('click', this.parentSelectHandler);

如果您想捕获event对象，请将匿名函数修改为

TreeStructure.prototype.parentSelectHandler = function (e) {

这会使e成为event对象

Answer 2

您没有传递函数但是执行它然后将返回值传递给click，您需要传递一个函数。

$('#' + this.parentSelectorId).click(this.parentSelectHandler);

如果您将该方法传递给click处理程序，则上下文将会更改，因此您需要使用将保留上下文的匿名函数对其进行包装：

var self = this;
$('#' + this.parentSelectorId).click(function(e) {
  self.parentSelectHandler(e);
});

或使用绑定方法

$('#' + this.parentSelectorId).click(this.parentSelectHandler.bind(this));

在javascript类构造函数中使用Jquery事件处理程序

2 个答案: