javascript 在 onchange 事件之前触发 onblur 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18215263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fire onblur event before onchange event
提问by Joel
I have a large form that contains several text input fields. Essentially, I need to handle the onchangeevent for all fieldsand the onblurevents for somefields. When a change is made to a field and the field loses focus, both events fire (which is the correct behavior). The only issue is that I would like to handle the onblurevent before I handle the onchangeevent.
我有一个包含多个文本输入字段的大表单。从本质上讲，我需要处理onchange事件的所有字段和onblur事件的一些领域。当对字段进行更改并且该字段失去焦点时，两个事件都会触发（这是正确的行为）。唯一的问题是我想在处理onblur事件之前处理onchange事件。
After some testing in ie and Firefox, it seems that the default behavior is to fire the onchangeevent before onblur. I have been using the following code as a test...
在 ie 和 Firefox 中进行了一些测试后，似乎默认行为是onchange在onblur. 我一直在使用以下代码作为测试...
<html>
<body >
<input type="text" value="here is a text field" onchange="console.log('Change Event!')" onblur="console.log('Blur Event!')" >
</body>
</html>
Which brings me to my questions:
这让我想到了我的问题：
It seems that this behavior is consistent across browsers. Why does
onchangefire first?Since I cannot handle the
onblurevent for every input element, is there a way I can getonblurto fire before handling theonchangeevent?
似乎这种行为跨浏览器是一致的。为什么
onchange先火？由于我无法处理
onblur每个输入元素的事件，有没有办法onblur在处理onchange事件之前触发？
回答by alexsh
The reason
onchangefires first is that once the element loses focus (i.e. 'blurs') the change is usually complete (I say usually because a script can still change the element without user interaction).For those elements that need
onblurhandled first, you can disable theonchangehandler and fire theonchange(or even a custom event) from theonblurhandler. This will ensure the correct order even though it is more work. To detect change, you can use a state variable for that field.
首先
onchange触发的原因是，一旦元素失去焦点（即“模糊”），更改通常就完成了（我说通常是因为脚本仍然可以在没有用户交互的情况下更改元素）。对于那些需要
onblur首先处理的元素，您可以禁用onchange处理程序并从处理程序中触发onchange（甚至自定义事件）onblur。这将确保正确的顺序，即使它是更多的工作。要检测更改，您可以为该字段使用状态变量。
As a general remark though, the need for such synchronicity is a sign that the approach you are using to solve whatever problem you are solving might need more work even though sometimes it cannot be avoided. If you are sure this is the only way, try one of these methods!
不过，一般来说，对这种同步性的需求表明，您用来解决正在解决的任何问题的方法可能需要更多的工作，即使有时无法避免。如果您确定这是唯一的方法，请尝试其中一种方法！
EDIT: Just to elaborate on the last point, you would have to follow some assumptions about your event model. Are you assuming that each changeevent is followed by a blurand goes unprocessed otherwise, or would you like to process each changebut those that are followed by a blurget further processing after whatever onblurdoes with them? In any case if you want to enforce the order the handlers would need access to a common resource (global variable, property, etc.). Are there other event types you might want to use? (input?). Finally, this link has some details for the changeevent for Mozilla browsers:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change.
The third 'bullet' addresses the issue of event order.
编辑：为了详细说明最后一点，您必须遵循有关事件模型的一些假设。您是否假设每个change事件后面都跟有 ablur并且不进行处理，或者您想处理每个事件，change但在对它们进行blur任何处理之后进行进一步处理onblur？在任何情况下，如果您想强制执行顺序，处理程序将需要访问公共资源（全局变量、属性等）。您可能还想使用其他事件类型吗？（input？）。最后，此链接包含changeMozilla 浏览器事件的一些详细信息：https:
//developer.mozilla.org/en-US/docs/Web/Reference/Events/change。第三个“子弹”解决了事件顺序的问题。
回答by Andrew Odri
This is a bit of hack, but it seems to do the trick on most browsers:
这是一个小技巧，但它似乎在大多数浏览器上都能奏效：
<input type="text" value="Text Input" onchange="setTimeout(function(){console.log('Change Event!')}, 0);" onblur="console.log('Blur Event!');" />
You can see a fiddle of it in action here: http://jsfiddle.net/XpPhE/
你可以在这里看到它的操作：http: //jsfiddle.net/XpPhE/
Here is a little background information on the setTimeout(function, 0)trick: http://javascript.info/tutorial/events-and-timing-depth
这里有一些关于这个setTimeout(function, 0)技巧的背景信息：http: //javascript.info/tutorial/events-and-timing-depth
Hope that helps :)
希望有帮助:)
