Question

Suppose I have a button on my web page:

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

Suppose that I write the following jQuery:

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

function doThis() {
    // do something
}

function doThat() {
    //do something else
}

When the button is clicked, how can I know which function should execute first? Or does it depend on things beyond my control?

Answer 1

The handlers are executed in the order they have been attached to the element (see the documentation):

If there are multiple handlers registered, they will always execute in the order in which they were bound.

So in your case, first doThis and then doThat will be executed.

Note: This only applies to jQuery. For information about pure DOM event handlers, see @StuperUser’s answer.

For general information about event handling in JavaScript, I can recommend the articles at quirksmode.org.