2

我是 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'时，它说它没有定义。

那么任何人都可以帮助我吗？

4

2 回答 2

3

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

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

应该

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

如果要捕获event对象，则将匿名函数修改为

TreeStructure.prototype.parentSelectHandler = function (e) {

这将使e持有event对象

于 2013-08-23T12:30:02.047 回答
2

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

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

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

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

或使用绑定方法

$('#' + this.parentSelectorId).click(this.parentSelectHandler.bind(this));
于 2013-08-23T12:31:47.607 回答