8

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

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

这让我想到了我的问题：

  1. 似乎这种行为在浏览器中是一致的。为什么onchange要先火？

  2. 由于我无法处理onblur每个输入元素的事件，有没有办法onblur在处理onchange事件之前触发？

4

2 回答 2

10

  1. 首先触发的原因onchange是一旦元素失去焦点（即“模糊”），更改通常是完整的（我说通常是因为脚本仍然可以在没有用户交互的情况下更改元素）。

  2. 对于那些需要onblur首先处理的元素，您可以禁用onchange处理程序并从处理程序中触发onchange（甚至是自定义事件）onblur。这将确保正确的顺序，即使它是更多的工作。要检测更改，您可以为该字段使用状态变量。

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

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

于 2013-08-13T17:24:15.833 回答
4

这有点小技巧，但它似乎在大多数浏览器上都能解决问题：

<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

希望有帮助:)

于 2013-08-13T17:27:22.837 回答