web-dev-qa-db-ja.com

blur（）対onblur（）

Onblurイベントリスナーを持つinputタグがあります。

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

JavaScriptを介して、この入力でblurイベントをトリガーし、doSomething関数を呼び出します。

私の最初の考えは、ぼかしを呼び出すことです。

_document.getElementById('myField').blur()
_

しかし、それは機能しません（エラーはありません）。

これは：

_document.getElementById('myField').onblur()
_

何故ですか？ .click()は、onclickリスナーを介して要素にアタッチされたクリックイベントを呼び出します。 blur()が同じように機能しないのはなぜですか？

javascriptjqueryonblur
22
DA.

この：

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

あなたの要素（<input>）には、値が関数である「onblur」という属性があります。したがって、それを呼び出すことができます。ただし、実際の「ぼかし」イベントをシミュレートするようブラウザに指示するのはnotです。たとえば、イベントオブジェクトは作成されません。

要素には「ぼかし」属性（または「メソッド」など）がないため、最初のものは機能しません。

28
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を使用したことに注意してください。そうしないと、クリック自体がフォーカスを削除してしまうためです。

11
Elian Ebbing

Onblurイベントが呼び出されるからだと思います結果として入力がフォーカスを失い、入力に関連付けられたblurアクションはありません。 クリックボタンに関連付けられたアクション

2
cusimar9