Question

假设我的网页上有一个按钮：

<input type='button' id='myButton' value='Click me!' />

假设我编写了以下jQuery：

$(document).ready(function() {
    var button = $('#myButton');
    button.click(doThis);
    button.click(doThat);
}

function doThis() {
    // do something
}

function doThat() {
    //do something else
}

单击该按钮时，如何知道应首先执行哪个功能？或者它取决于我无法控制的事情？

Answer 1

处理程序按照它们附加到元素的顺序执行（参见documentation）：

如果注册了多个处理程序，它们将始终按照绑定的顺序执行。

因此，在您的情况下，首先执行doThis然后doThat。

注意：这仅适用于jQuery。有关纯DOM事件处理程序的信息，请参阅@StuperUser's answer。

有关JavaScript中事件处理的一般信息，我可以推荐the articles at quirksmode.org。

Answer 2

jQuery事件将按照@Felix Kling和@Kyle所说的顺序触发。

除了jQuery之外，情况并非如此。根据{{3}} - 关于DOM Level 2事件模型（例如使用addEventListener而不是$.bind或调用它的方法）

请注意，即使处理程序按照建立的顺序触发，标准也不保证此顺序！此代码的测试人员从未观察到除了建立顺序之外的订单，但是编写依赖于此顺序的代码是愚蠢的。始终要注意，在元素上建立的多个处理程序可能会以随机顺序触发。

使用jQuery的另一个原因。

Answer 3

它们将按照绑定它们的顺序执行（doThis后跟doThat）。

我的元素上的哪个jQuery附加事件首先触发？

3 个答案: