Question

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

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

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

我最初想的是调用模糊：

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

但这不起作用（虽然没有错误）。

这样做：

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

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

Answer 1

此：

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

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

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

Answer 2

与尖头所说的相反，blur()方法确实存在，并且是w3c standard的一部分。以下exaple将适用于每个现代浏览器（包括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，因为否则点击本身会删除焦点。

Answer 3

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

blur（）vs. onblur（）

3 个答案: