在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));