【问题标题】：Order of execution of jquery event handlers in respect to (inline) javascript event handlersjquery 事件处理程序相对于（内联）javascript 事件处理程序的执行顺序
【发布时间】：2011-03-28 05:53:19
【问题描述】：

如果我错了，请纠正我，但在我看来，jQuery 事件处理与 javascript 事件处理完全分开。我知道 jQuery 和 javascript 事件处理程序本身的执行顺序是未定义的，但是可以假设所有 javascript 处理程序都将在 jQuery 处理程序之前执行吗？

在example对此question的回答中给出的似乎是这种情况。

另外，在执行内联 javascript 事件处理程序方面是否有任何偏好？

为了澄清起见，我之所以问所有这些问题是因为我遇到了一个问题，即我在 <a> 元素的 onClick 事件上有一个内联事件处理程序，它调用封闭表单的 submit() 方法。就在提交表单之前，我想在表单中动态添加一些隐藏的inputs。现在我正在这样做：

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

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

但我真的想知道是否有更优雅的方式，我真的需要对此进行一些澄清。

【问题讨论】：

" 我知道 jQuery 和 javascript 事件处理程序本身的执行顺序是未定义的" - 不，所有与 jQuery 绑定的事件处理程序都将按照它们绑定的顺序执行（当绑定到特定元素时 - 使用委托处理程序，您必须允许冒泡）因为 jQuery 为您管理它。但是 jQuery 仍然是 JavaScript，它仍然使用 addEventListener()（当浏览器有它时），所以非 jQuery 与 jQuery 处理程序的顺序将是不确定的。

标签： javascript jquery events

【解决方案1】：

我不确定规格，但我认为事件处理程序只是按照您定义它们的顺序排队。内联处理程序是在 DOM 节点中定义的，因此其他任何事情都不能提前。

最优雅的方式是以不显眼的方式编写 all 你的 JavaScript，即将它与 HTML 分开（你似乎在混合编程风格）。不管怎样，您可以通过将onsubmit 处理程序附加到表单来拦截表单提交：

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

更新

我已经进行了一些测试，当您在其他地方调用 DOM 的 submit() 方法时，似乎不会触发通过 jQuery 附加到表单的 onsubmit 处理程序。这是一个解决方法：

<!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>

【讨论】：

如果由我决定，我肯定会把它全部写在一个单独的文件中。不幸的是，我使用已经包含事件处理的动态生成的页面，现在将其删除只是在寻找问题。我已经尝试过使用onSubmit() 拦截提交，但如果使用submit() 提交表单，就在按下提交按钮时，它永远不会被调用。不过感谢您的回答。

【解决方案2】：

有两种解决方案：包装表单的提交函数或链接的onClick处理程序。我不知道 jQuery 提供了“包装现有函数”API。

至于运行顺序，jQuery 是 JavaScript，所以当浏览器运行它们时，处理程序就会运行。这不是 jQuery 特有的，除非 API 声明某些东西是异步运行的。

【讨论】：

【解决方案3】：

除了您的问题的详细信息，您还可以添加一个 onsubmit 事件，该事件将在表单提交之前被调用...

【讨论】：