关于jQuery事件处理程序与（内联）JavaScript事件处理程序的执行顺序

Question

关于jQuery事件处理程序与（内联）JavaScript事件处理程序的执行顺序

4

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

在此问题的答案中给出的示例似乎是这种情况。

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

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

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

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

但我真的很想知道是否有更优雅的方法，我确实需要一些澄清。

- alh84001

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

3个回答

1

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

至于运行顺序，jQuery是JavaScript，因此处理程序在浏览器运行它们时运行。除非API声明某些内容以异步方式运行，否则这不是jQuery特定的事情。

- Aaron Digulla

0

除了你的问题细节之外，你可以添加一个onsubmit事件，这个事件会在表单提交之前被调用...

- Fenton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Álvaro González · Accepted Answer

我不确定规格，但我认为事件处理程序只是按您定义它们的顺序排队。内联处理程序直接在DOM节点中定义，因此没有其他内容可以在其之前运行。

最优雅的方式是以不侵入式的方式编写所有JavaScript，即将其与HTML分离（您似乎混合了编程风格）。无论如何，您可以通过将onsubmit处理程序附加到表单来拦截表单提交：

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

更新

我进行了一些测试，发现通过jQuery绑定到表单的onsubmit处理程序在您在其他地方调用DOM的submit()方法时不会触发。以下是解决方法：

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