blur() 与 onblur()答案

【问题标题】：blur() vs. onblur()blur() 与 onblur()
【发布时间】：2011-03-06 18:55:15
【问题描述】：

我有一个带有 onblur 事件监听器的输入标签：

<input id="myField" type="input" onblur="doSomething(this)" />

通过 JavaScript，我想在此输入上触发模糊事件，以便它依次调用 doSomething 函数。

我最初的想法是叫模糊：

document.getElementById('myField').blur()

但这不起作用（尽管没有错误）。

这样做：

document.getElementById('myField').onblur()

这是为什么呢？ .click() 将通过 onclick 侦听器调用附加到元素的 click 事件。为什么blur() 的工作方式不一样？

【问题讨论】：

我认为 blur() 是 jQuery 而 onBlur() 是 Javascript。
@Ray 不，这不是很准确，尽管 jQuery 确实提供了一种“模糊”方法来触发事件（或注册处理程序）。但是，该方法由 jQuery 对象提供，不适用于普通 DOM 元素。
虽然你的问题得到了回答，但我还是很好奇是什么让你通过显式触发onblur函数来执行doSomething()函数！为什么不能直接拨打doSomething？
@user1451111 对于 7 年前我在做什么，我的记忆有点模糊 :)

标签： javascript jquery onblur

【解决方案1】：

与 pointy 所说的相反，blur() 方法确实存在并且是w3c standard 的一部分。以下示例适用于所有现代浏览器（包括 IE）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Javascript test</title>
        <script type="text/javascript" language="javascript">
            window.onload = function()
            {
                var field = document.getElementById("field");
                var link = document.getElementById("link");
                var output = document.getElementById("output");

                field.onfocus = function() { output.innerHTML += "<br/>field.onfocus()"; };
                field.onblur = function() { output.innerHTML += "<br/>field.onblur()"; };
                link.onmouseover = function() { field.blur(); };
            };
        </script>
    </head>
    <body>
        <form name="MyForm">
            <input type="text" name="field" id="field" />
            <a href="javascript:void(0);" id="link">Blur field on hover</a>
            <div id="output"></div>
        </form>
    </body>
</html>

请注意，我使用了link.onmouseover 而不是link.onclick，因为否则点击本身会移除焦点。

【讨论】：

【解决方案2】：

这个：

document.getElementById('myField').onblur();

之所以有效，是因为您的元素（<input>）有一个名为“onblur”的属性，其值为一个函数。因此，您可以调用它。但是，您没有告诉浏览器模拟实际的“模糊”事件；例如，没有创建事件对象。

元素没有“模糊”属性（或“方法”或其他），所以这就是为什么第一件事不起作用的原因。

【讨论】：

但是你可以调用 .click() 来模拟点击事件，对吗？我的错误是假设 .blur() 也存在。感谢您的回答！
@DA: .blur() 确实存在于某些浏览器中，但如果元素没有焦点，则首先需要为其提供焦点。 Try this example 在 Chrome 中。我不知道哪些浏览器支持/不支持它。
是的，因为浏览器确实支持一种名为“click”的DOM元素方法。我同意这只是不一致。在任何人有机会思考同步之前，其中许多事情都在 10 年或更长时间前迅速发展。我认为这是 Prototype 和 jQuery 等库如此受欢迎的主要原因之一。
我不会让这个项目使用 jQuery... ;) 所以，如果我坚持使用 onBlur() 选项，就当前浏览器而言（相对）安全支持。有什么我应该寻找的问题吗？
嗯，它基本上只是从 DOM 元素访问对函数的引用，所以它非常安全。我认为 IE 不会对此抱怨，并且会正确地将this 绑定到元素，但您可以仔细检查。

【解决方案3】：

我猜这只是因为 onblur 事件被调用 作为输入失去焦点的结果，没有与输入相关联的 blur 动作，就像那里是一个与按钮关联的点击动作

【讨论】：