Question

我是Javascript或JQuery的新手。我有一个非常完整的HTML资源，其中一个按钮元素有一个函数X1来处理它的点击事件。

现在，我不想修改现有HTML资源中的任何内容，但想要在用户点击按钮时添加我的功能X2。我的目的是在实现functionX1之后，我的functionX2将被实现。

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

它可以吗？

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

现有的html资源如下所示：

＆＃34; libs.js＆＃34;包含functionX1来处理click事件：


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

}

＆＃34;的index.html＆＃34;包含按钮


head

script src="libs.js"

/head

body

div id="button"

/body

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


$('#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

这很容易实现。根据代码的结构，您只需在匿名处理程序中调用functionX2后将调用发送到functionX1：

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

或者，您可以在functionX2()：

结束时致电functionX1()

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

   functionX2();
}

Answer 2

$("#my-btn").on("click", function () { alert(1); });
$("#my-btn").on("click", function () { alert(2); });

jQuery已经支持这个。

Answer 3

[修改] 正如Stefan所说：jQuery可以处理多个事件处理程序并按它们绑定的顺序触发它们。

所以只需添加

$('#foo').click(function () { X2(); });
>原来的处理程序被附加后，你就可以了。

Fiddle

[我会将此留待以备参考，但已过时]

有一个选项，但它是黑客，容易出错，我会推荐Rory的第一个解决方案，但是我们走了：

//the original click $('#foo').click(function () { X1(); }); //add an additional MOUSEUP listener //note that mouseup fires before click, so there has to be a timeout $('#foo').mouseup(function () { setTimeout(function () { X2() }, 200); }); function X1() { //run X1 } function X2() { //run X2 }

Here is a fiddle

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

3 个答案: