关于(内联)javascript事件处理程序的jquery事件处理程序的执行顺序

时间:2010-08-11 07:44:32

标签: javascript jquery events

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

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

此外,是否有关于绑定的内联javascript事件处理程序的首选项?

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

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

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


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

3 个答案:

答案 0 :(得分:4)

我不确定规格,但我认为事件处理程序的排队顺序与您定义它们的顺序相同。内联处理程序在DOM节点中定义,因此没有其他任何东西可以提前。

最优雅的方法是以不引人注目的方式编写全部您的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>

答案 1 :(得分:1)

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

对于运行顺序,jQuery是JavaScript,因此处理程序在浏览器运行时运行。这不是特定于jQuery的东西,除非API声明某些东西是异步运行的。

答案 2 :(得分:0)

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