Question

我有一个包含多个文本输入字段的大表单。从本质上讲，我需要处理所有字段的onchange事件和部分字段的onblur事件。当对字段进行更改并且字段失去焦点时，两个事件都会触发（这是正确的行为）。唯一的问题是我想处理onblur 我处理onchange事件之前的事件。

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

这让我想到了我的问题：

似乎这种行为在浏览器中是一致的。为什么onchange先开火？
由于我无法处理每个输入元素的onblur事件，有没有办法在处理onblur事件之前触发onchange？

Answer 1

onchange首先触发的原因是，一旦元素失去焦点（即'模糊'），变化通常就完成了（我说通常是因为脚本仍然可以在没有用户交互的情况下更改元素）。
对于首先需要处理onblur的元素，您可以停用onchange处理程序并从onchange触发onblur（甚至是自定义事件）处理程序。这将确保正确的订单，即使它是更多的工作。要检测更改，可以对该字段使用状态变量。

作为一般性评论，对这种同步性的需求表明，即使有时无法避免，您用于解决您正在解决的任何问题的方法可能需要更多的工作。如果您确定这是唯一的方法，请尝试以下方法之一！

编辑：只是要详细说明最后一点，你必须遵循一些关于你的事件模型的假设。您是假设每个change事件后跟blur并且未经处理，或者您希望处理每个change但是后面跟blur获取的事件在onblur对它们做什么之后进一步处理？在任何情况下，如果您想强制执行订单，处理程序将需要访问公共资源（全局变量，属性等）。您可能想要使用其他事件类型吗？（input？）。最后，此链接包含Mozilla浏览器的change事件的一些详细信息： https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change。第三个“子弹”解决了事件顺序问题。

Answer 2

这有点黑客攻击，但似乎在大多数浏览器上都有这个技巧：

<input type="text" value="Text Input" onchange="setTimeout(function(){console.log('Change Event!')}, 0);" onblur="console.log('Blur Event!');" />

你可以在这里看到它的一个小提琴：http://jsfiddle.net/XpPhE/

以下是关于setTimeout(function, 0)技巧的一些背景信息：http://javascript.info/tutorial/events-and-timing-depth

希望有所帮助：）

在onchange事件之前开火onblur事件

2 个答案: