关于（内联）JavaScript事件处理程序的jquery事件处理程序的执行顺序 [英] Order of execution of jquery event handlers in respect to (inline) javascript event handlers
问题描述
在<在这个问题似乎是这样的。
另外，是否有任何偏好执行内联javascript事件处理程序？
为了澄清，我要求所有这一切，因为我遇到一个问题，我有一个内联事件处理程序在 onClick 事件的调用封闭表单的 submit（）方法的< a> 元素。在提交表单之前，我想动态地向窗体中添加一些隐藏的输入。现在我这样做：
var preSubmit = function preSubmit（）
{
// add输入
}
var oldSubmit = form.submit;
form.submit = function newSubmit（）
{
preSubmit（）;
oldSubmit.call（form，arguments）;
}
但我真的想知道是否有是一个更优雅的方式，我真的需要一些澄清。
我不知道规范，但我认为那个事件处理程序只是按照你定义的顺序进行排队。内联处理程序定义在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-Typecontent =text / html; charset = iso-8859-1>
< script type =text / javascriptsrc =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（）{//删除以前的处理程序
alert（我将不再提交表单）;
$（this）.closest（form ）.submit（）;
};
}）;
$（form）。submit（function（）{
alert（我会照顾自己，谢谢你）;
$（input [name = foo]）。val（另一个值）;
return true;
}）;
}）;
// - >< / script>
< / head>
< body>
< form action =method =get>
< input type =textname =foovalue =默认值>
< a href =javascript :; onclick =document.forms [0] .submit（）>提交表单< / a>
< / form>
< / body>
< / html>
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'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>
这篇关于关于（内联）JavaScript事件处理程序的jquery事件处理程序的执行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
