在 Javascript 类构造函数中使用 jQuery 事件处理程序

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

你不是传递一个函数而是你执行它然后传递返回值给点击，你需要传递一个函数。

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

如果您将该方法传递给单击处理程序，则上下文将发生变化，因此您需要使用匿名函数包装它以保留上下文：

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

或者使用绑定方法

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