javascript - 是否可以在 Javascript 中为同一个事件处理程序实现 2 个函数？

Question

我对 Javascript 或 JQuery 很陌生。我有一个相当完整的 HTML 资源，其中一个按钮元素有一个函数 X1 来处理它的点击事件。

现在，我不想修改现有 HTML 资源中的任何内容，而是想在用户单击按钮时添加我的函数 X2。我的目的是实现functionX1之后，我的functionX2就会被实现。

我在一个单独的 javascript 文件中编写了 functionX2，并包含在 index.html 中。

这可能吗？

-------------------------------- 编辑------------ ------------------

现有的 html 资源如下所示:

• 包含 functionX1 的“libs.js”来处理点击事件:

$('#button').on('click', function() {
   //-do X1 here
   ....

}

• 包含按钮的“index.html”

head

script src="libs.js"

/head

body

div id="button"

/body

现在，我不想修改“libs.js”的任何内容，我编写了一个单独的 javascript 文件“mylibs.js”，在其中创建另一个函数来处理按钮的点击事件。

$('#button').on('click', function() {
   //-do X2 here
   ....

}

在 index.html 中，我包含了我的 js 文件

head

script src="libs.js"
script src="mylibs.js"

/head

body

div id="button"

/body

那么它是否符合我的目的:在单击按钮时执行 X1 然后执行 X2？

如果我像上面那样包含，当按钮被点击时，会发生以下情况之一吗？

• X1 将被执行，X2 被忽略。
• X1 将被忽略，X2 将被执行。
• X1将执行，X2将执行。

Answer 1

这很容易实现。根据代码的结构，您只需要在匿名处理程序中调用 functionX1 之后调用 functionX2:

$('#foo').click(function() {
    functionX1();
    functionX2();
});

或者，您可以在 functionX1() 的末尾调用 functionX2():

var functionX1 = function() {
    // your logic...

   functionX2();
}