Order of execution of jquery event handlers in respect to (inline) javascript event handlers

Question

Correct me if I am wrong, but seems to me jQuery event handling is completely separate from the javascript event handling. I know that the order of executing jQuery and javascript event handlers themselves is undefined, but can the assumption be made that all javascript handlers will execute before jQuery ones?

In the example given in an answer to this question that seems to be the case.

Also, is there any preference on executing inline javascript event handlers in respect to bound ones?

For clarification, I am asking all of this because I encountered a problem where I have an inline event handler on onClick event of an <a> element that calls the submit() method of an enclosing form. Just before submitting the form, I want to dynamically add some hidden inputs to the form. Right now I am doing this:

        var preSubmit = function preSubmit()
        {
            // add inputs
        }

        var oldSubmit = form.submit;
        form.submit = function newSubmit()
        {
            preSubmit();
            oldSubmit.call(form, arguments);
        }

But I'm really wondering if there is a more elegant way and I really need some clarification on this.

_" I know that the order of executing jQuery and javascript event handlers themselves is undefined"_ - No, all event handlers bound with jQuery will be executed in the order they are bound (when bound to a particular element - with delegated handlers you have to allow for bubbling) because jQuery manages this for you. But jQuery is still JavaScript, it still uses `addEventListener()` (when the browser has it), so the order of non-jQuery versus jQuery handlers will be undefined. — nnnnnn, Jun 18 '13 at 12:39

Álvaro González · Accepted Answer · 2010-08-11T09:18:16.713

I'm not sure about the specs but I presume that event handlers are just queued in the same order as you define them. Inline handlers are defined right in the DOM node so nothing else can go earlier.

The most elegant way is to write all your JavaScript in an unobtrusive way, i.e., keep it separated from HTML (you appear to be mixing programming styles). Whatever, you can intercept form submission by attaching an onsubmit handler to the form:

$("form").submit(function(){
    // Do stuff
    return true;
});

Update

I've done some testing and it appears that an onsubmit handler attached to a form via jQuery does not get triggered when you call the DOM's submit() method somewhere else. Here's a workaround:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
jQuery(function($){
    $("a").each(function(i, a){
        a.onclick = function(){ // Remove previous handlers
            alert("I will no longer submit the form");
            $(this).closest("form").submit();
        };
    });
    $("form").submit(function(){
        alert("I'll take care myself, thank you");
        $("input[name=foo]").val("Another value");
        return true;
    });
});
//--></script>
</head>
<body>


<form action="" method="get">
    <input type="text" name="foo" value="Default value">
    <a href="javascript:;" onclick="document.forms[0].submit()">Submit form</a>
</form>

</body>
</html>

If it were up to me I would definitely write it all in a separate file. Unfortunately I work with dynamically generated pages that already contain event handling, and removing it out now is just asking for problems. I already tried intercepting submission with `onSubmit()` but it never gets called if submitting form with `submit()`, just when pushing the submit button. Thanks for the answer though. — alh84001, Aug 11 '10 at 08:21

score 1 · Answer 2 · answered Aug 11 '10 at 07:51

There are two solutions: Wrap the submit function of the form or the onClick handler of the link. I'm not aware that jQuery offers a "wrap existing function" API.

As for the run order, jQuery is JavaScript, so the handlers run when the browser runs them. That's not something specific to jQuery, except when the API states that something is run asynchronously.

score 0 · Answer 3 · answered Aug 11 '10 at 07:50

0

Asides from the detail of your question, you could just add an onsubmit event, which will be called before the form submits anyway...

answered Aug 11 '10 at 07:50

Fenton

241,084
71
387
401

Order of execution of jquery event handlers in respect to (inline) javascript event handlers

3 Answers3

Update

Linked