Question

您好我是这个面向对象的javascript（或任何oop）的新手，我正在尝试一些事情，并且一直陷入困境。

在这个简单的例子中，我试图在事件中使用一个函数，这样我就可以在需要时重用这两个事件/函数。 click事件应该触发一个特定的函数，我使用可以单击的元素和单击时需要调用的函数的参数。

到目前为止我的代码：可点击的简单标题：

<h2 class="click_title">Show alert on click</h2>

JS：

var myScripts = {
    alertText : function() {
        alert("it works")
    },
    onClicks : function( element, fn ) {
        $( element ).on( "click", function( fn ){
            fn();
        });
    }
}

myScripts.onClicks(".click_title", myScripts.alertText);

我在这种情况下使用jQuery来选择实际的元素，但我确信这不管是什么问题。

奇怪的是，当我使用以下行时：

myScripts.onClicks(".click_title", myScripts.alertText());

它显示加载时的警报而非点击。

希望这有点清楚，而且我希望它能以某种方式在我想要实现的目标中变得有意义。我现在唯一能想到的是，也许不可能将事件添加到对象中以便重用，但我可能也错了。请告诉我一些事情。

任何帮助都非常感激。

更新：我注意到以下情况确实有效：

var myScripts = {
    alertText : function() {
        alert("it works")
    },
    clicky : function( element, fn){$( element ).click(fn)}

}

myScripts.clicky( ".click_title", myScripts.alertText);

是什么让这一行：

function( element, fn){$( element ).click(fn)}

与此行不同：

function( element, fn ) {
        $( element ).on( "click", function( fn ){
                fn();
            });
        }

???

Answer 1

仅考虑您的第一个代码段。

您的问题出在onClicks。

onClicks : function( element, fn ) { // fn is the passed event handler
    $( element ).on( "click", function( fn ){ // fn is Event object
        fn(); // fn is Event object, not the passed handler function
    });
}

事件处理程序由事件队列调用，事件队列使用单个参数调用处理程序 - 事件对象。因此传递给fn参数中定义的处理函数的.on引用了Event对象，该对象特定于此事件。

解决这个问题很简单：

onClicks : function( element, fn ) {
    $( element ).on( "click", function( e ){
        fn( e );
    });
}

e是自动传递的Event对象，从外部作用域读取fn，因此它保留了在将事件附加到元素时传递的原始值。另请注意，e也会传递给实际的处理程序，以防万一你需要它。

A live demo at jsFiddle。小提琴还向您展示了如何将Event对象传递给处理程序并在那里使用它。

Answer 2

您正在查看这两个代码段之间的错误差异！

问题在于这一行：

myScripts.onClicks(".click_title", myScripts.alertText());

请注意，第二个参数是调用 alertText的结果 - 而不是对alertText函数的引用。试试这个，你的第一个例子应该有效：

myScripts.onClicks(".click_title", myScripts.alertText);

（唯一的区别是删除alertText之后的括号;传递函数，而不是调用它并传递结果。）

在位于对象内部的事件内使用函数，然后调用该函数

2 个答案: