Рекомендации по курсу:
Событие onfocusout
Определение и использование
Хотя Firefox не поддерживает событие onfocusout, вы можете понять, теряет ли фокус подэлемент элемента, используя捕获слушатель события onblur (с использованием опционального параметра useCapture метода addEventListener()). Основное различие заключается в том, что событие onblur не бубнит. Поэтому, если вы хотите определить, теряет ли фокус элемент или его подэлемент, используйте событие onfocusout. Событие onfocusout occurs when the element is about to lose focus. Событие onblurСобытие onfocusout подобно
Хотя Firefox не поддерживает событие onfocusout, вы можете понять, теряет ли фокус подэлемент элемента, используя捕获слушатель события onblur (с использованием опционального параметра useCapture метода addEventListener()). Основное различие заключается в том, что событие onblur не бубнит. Поэтому, если вы хотите определить, теряет ли фокус элемент или его подэлемент, используйте событие onfocusout..
Хотя Firefox не поддерживает событие onfocusout, вы можете понять, теряет ли фокус подэлемент элемента, используя捕获слушатель события onblur (с использованием опционального параметра useCapture метода addEventListener()). Основное различие заключается в том, что событие onblur не бубнит. Поэтому, если вы хотите определить, теряет ли фокус элемент или его подэлемент, используйте событие onfocusout. Совет: Событие onfocusinСобытие onfocusout
Противоположное.
Пример
Пример 1
Когда вводимое поле собирается потерять фокус, выполняется JavaScript:
<input type="text" onfocusout="myFunction()">
Ниже страницы есть больше примеров TIY.
Грамматика
В HTML:< element.addEventListener("focusout",onfocusout="
">
В JavaScript, используя метод addEventListener():In JavaScript (может не работать как ожидается в Chrome, Safari и Opera 15+):.addEventListener("focusout",.onfocusout = function(){
};
В JavaScript, используя метод addEventListener():object .addEventListener("focusout",myScript
Комментарий:); Internet Explorer 8 и более ранние версии не поддерживаютМетод addEventListener()
.
| Технические детали | Поддержка |
|---|---|
| Бубнение: | Можете отменить: |
| Не поддерживается: | FocusEvent |
| Поддерживаемые элементы HTML: | Все элементы HTML, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> и <title> |
| Версия DOM: | Уровень 2 событий |
Поддержка браузеров
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает это событие.
| Событие | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | Поддержка | Поддержка | 52.0 | Поддержка | Поддержка |
Комментарий:Событие onfocusout может не работать как ожидалось в Chrome, Safari и Opera 15+. Однако, оно должно использоваться как атрибут HTML и с помощью метода addEventListener() (см. пример синтаксиса ниже).
Более сложные примеры
Пример 2
Использование событий "onfocusin" и "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Пример 3
Обработка событий: установите параметр useCapture в addEventListener() в true (для focus и blur):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
Пример 4
Обработка событий: использование события focusin:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
