Fatal编程技术网
  • javascript/
  • Javascript 在onchange事件之前触发onblur事件

Javascript 在onchange事件之前触发onblur事件

javascript jquery html dom

Javascript 在onchange事件之前触发onblur事件,javascript,jquery,html,dom,javascript-events,Javascript,Jquery,Html,Dom,Javascript Events,我有一个包含几个文本输入字段的大表单。本质上，我需要处理所有字段的onchange事件，以及一些字段的onblur事件。当对字段进行更改并且该字段失去焦点时，两个事件都会触发（这是正确的行为）。唯一的问题是我想处理onblur 事件，然后再处理onchange事件 在ie和Firefox中进行了一些测试之后，默认行为似乎是在onblur之前触发onchange事件。我一直在使用以下代码作为测试 <html> <body > <input type="tex

我有一个包含几个文本输入字段的大表单。本质上，我需要处理所有字段的
onchange
事件，以及一些字段的
onblur
事件。当对字段进行更改并且该字段失去焦点时，两个事件都会触发（这是正确的行为）。唯一的问题是我想处理
onblur
事件，然后再处理
onchange
事件

在ie和Firefox中进行了一些测试之后，默认行为似乎是在
onblur
之前触发
onchange
事件。我一直在使用以下代码作为测试

<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
    事件，是否有办法在处理
    onchange
    事件之前触发
    onblur

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

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

    • 不过，一般来说，这种同步性的需要是一个迹象，表明您用于解决任何问题的方法可能需要更多的工作，尽管有时无法避免。如果您确定这是唯一的方法，请尝试以下方法之一

    编辑：为了详细说明最后一点，您必须遵循有关事件模型的一些假设。您是否假设每个
    change
    事件后面都有一个
    blur
    ，否则将不进行处理，或者您是否希望处理每个
    change
    ，但后面跟着
    blur
    的事件在
    onblur
    对其执行任何操作后都会得到进一步处理？在任何情况下，如果要强制执行顺序，处理程序都需要访问公共资源（全局变量、属性等）。是否有其他可能需要使用的事件类型？（
    输入
    ？）。最后，此链接提供了有关Mozilla浏览器的
    change
    事件的一些详细信息： .
    第三个“项目符号”解决了事件顺序的问题。

    这是一个小技巧，但它似乎在大多数浏览器上都起到了作用：

    <input type="text" value="Text Input" onchange="setTimeout(function(){console.log('Change Event!')}, 0);" onblur="console.log('Blur Event!');" />
    你可以在这里看到一把小提琴在演奏：

    下面是有关
    setTimeout（函数，0）
    技巧的一些背景信息：

    希望有帮助：）

    您的标签中有
    jQuery
    。你在用它吗？如果是这样，您可以通过检查处理程序内的
    事件来处理事件。键入
    。@DevlshOne-但您不能更改事件的触发顺序。@DevlshOne我正在实际项目中使用它，因此它可以用于解决方案。否，你不能，但你可以按照你想要的顺序来处理它们。在onchange调用中使用setTimeout调用来延迟执行。+1：“这种同步性的需要表明你正在使用的方法……可能需要更多的工作”，如果我只处理那些select元素的onblur事件，我将无法知道该字段是否已更改。。。因此是onchange处理程序。为每个字段创建状态变量不是很简单trivial@Joel由于前面有
    onchange
    ，因此可以在元素上设置一个数据属性，以指示值在
    onchange
    处理程序中已更改，然后在
    onblur
    处理程序中读取并清除该属性，并根据该属性进行操作。我刚刚添加了一条注释，正好解决了这个问题。可以将状态保存在单独的变量中。一种更干净、但更繁琐的方法是将
    onblur
    事件的处理分为两部分：第二部分由
    onchange
    触发，然后返回到
    onchange
    处理程序的第二部分（这可能是一种过度的处理方式）。我不确定这是否可靠。听起来规范并不能保证在使用
    setTimeout
    立即计划回调之前触发事件处理程序，因此您可能只是依赖于那里的实现细节。