размытие () против onblur () - PullRequest
Новая
       6

размытие () против onblur ()

21 голосов
/ 06 марта 2011

У меня есть входной тег с прослушивателем события onblur: 

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

С помощью JavaScript я хочу вызвать размытие на этом входе, чтобы он, в свою очередь, вызывал функцию doSomething.

Моя первоначальная мысль - назвать размытие: 

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

Но это не работает (хотя и без ошибок).

Это делает: 

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

Почему это? .click() вызовет событие click, прикрепленное к элементу через слушателя onclick. Почему blur() не работает так же?

Ответы [ 3 ]

28 голосов
/ 06 марта 2011

Это: 

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

работает, потому что ваш элемент (<input>) имеет атрибут с именем "onblur", значением которого является функция.Таким образом, вы можете назвать это.Однако вы не говорите браузеру смоделировать фактическое событие размытия;например, объект события не создан.

Элементы не имеют атрибута "размытия" (или "метода" или чего-либо еще), поэтому первое не работает.

11 голосов
/ 06 марта 2011

Вопреки сказанному, метод blur() существует и является частью w3c стандарта . Следующий пример будет работать в каждом современном браузере (включая 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 голосов
/ 06 марта 2011

Полагаю, это просто потому, что событие onblur называется в результате потери входного фокуса, с входом не связано действие blur , как, например, нажмите действие, связанное с кнопкой

...