Javascript 在一个事件中使用一个函数，该事件位于一个对象内部，然后调用该对象

您好，我是这个面向对象javascript（或任何面向对象的javascript）的新手，我正在尝试一些东西，并一直被困在某个点上

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

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

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

在本例中，我使用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();
            });
        }

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

与此行不同：

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

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

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

---

？？？

您看到的是这两个代码片段之间的错误差异

问题在于这一行：

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

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

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

请注意，第二个参数是调用

alertText

的结果-不是对

alertText

函数的引用。试试这个，你的第一个例子应该可以：

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

---

（唯一的区别是删除了

alertText

；传递函数后的括号，而不是调用函数并传递其结果。）

这两个代码段之间的区别是错误的

问题在于这一行：

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

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

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

请注意，第二个参数是调用

alertText

的结果-不是对

alertText

函数的引用。试试这个，你的第一个例子应该可以：

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

---

（唯一的区别是删除了

alertText

；传递函数后的括号，而不是调用函数并传递结果。）

只考虑第一个代码片段

您的问题出现在

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

的参数引用特定于此事件的事件对象

解决这个问题很容易：

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

e

是自动传递的事件对象，

fn

是从外部范围读取的，因此它保留了将事件附加到元素时传递的原始值。还要注意，

e

也被传递给实际的处理程序，以防您需要它

---

。小提琴还向您展示了如何将事件对象传递给处理程序并在那里使用它。

仅考虑您的第一个片段

您的问题出现在

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

的参数引用特定于此事件的事件对象

解决这个问题很容易：

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

e

是自动传递的事件对象，

fn

是从外部范围读取的，因此它保留了将事件附加到元素时传递的原始值。还要注意，

e

也被传递给实际的处理程序，以防您需要它

---

。小提琴还向您展示了如何将事件对象传递给处理程序并在那里使用它。

fn

此处：

function（fn）{…}

是事件对象，而不是您传递给

onClicks

的

fn

。您对这一点的意思不是100%确定，请尽可能解释。谢谢。

fn

这里：

function（fn）{…}

是事件对象，而不是您传递给

onClicks

的

fn

。您对这一点的意思不是100%确定，请尽可能解释。谢谢。这解释了为什么第二个代码段会在加载时发出警报，但会退回到OP的第一个代码段，正如他们所说，这也不起作用。这解释了为什么第二个代码段会在加载时发出警报，但退回到OP的第一个代码段，正如他们所说，这也不起作用。谢谢@Teemu，这似乎确实起到了预期的作用。但是，我似乎一直在努力向事件处理程序中添加的函数传递附加参数，以防需要，例如：alert替换为.css（“fontSize”，parameterValue）。将继续测试一点，如果需要，发布另一个问题。感谢您的帮助：）@asturnick您可以传递参数，例如。我使用了一个对象，但是你可以使用任何你需要的数据类型。绝对漂亮，所以你只是动态地创建了一个对象。太棒了，再次感谢。@asturnick你很好。实际上这个例子很简单，参数是硬编码到文件中的。作为一个例子，您也可以在JavaScript中使用real。谢谢@Teemu，这看起来确实像预期的那样工作。但是，我似乎一直在努力向事件处理程序中添加的函数传递附加参数，以防需要，例如：alert替换为.css（“fontSize”，parameterValue）。将继续测试一点，如果需要，发布另一个问题。感谢您的帮助：）@asturnick您可以传递参数，例如。我使用了一个对象，但是你可以使用任何你需要的数据类型。绝对漂亮，所以你只是动态地创建了一个对象。太棒了，再次感谢。@asturnick你很好。实际上这个例子很简单，参数是硬编码到文件中的。例如，您也可以在JavaScript中使用real。