Руководство Javascript FocusEvent
View more Tutorials:
FocusEvent это интерфейс представляющий события связанные с focus, точнее 4 события focus, focusin, blur, focusout.

- TODO Link!
Свойства (property):
Свойство | Описание |
---|---|
relatedTarget | Возвращает элемент связанный с элементом, который активировал событие. |
Если вы перепрыгните на элемент, потом выпрыгните наружу (focus в другой элемент), то будет 4 события, что произойдут по-порядку:
- focus
- focusin
- blue
- focusout

Событие focus происходит перед focusin, на самом деле она происходят совсем близко друг к другу, можно сказать одновременно. Таким образом, событие blur происходит перед focusout, на самом деле она происходят совсем близко друг к другу, можно сказать одновременно.
focus
Событие focus происходит, когда вы находитесь в другом месте и прыгаете в элемент, например элемент <input>, чтобы приготовиться ввести содержание для данного элемента.
blur
Событие blur происходит, когда вы выпрыгиваете из элемента (focus в другой элемент).
focusevent-example.html
<!DOCTYPE html> <html> <head> <title>FocusEvent</title> <script> function focusHandler(evt) { showLog("focus"); } function blurHandler(evt) { showLog("blur"); } function showLog(msg) { var oldHtml= document.getElementById("log-div").innerHTML; document.getElementById("log-div").innerHTML=oldHtml + " .. "+ msg; } </script> </head> <body> <h3>Test events: focus, blur</h3> <input type="text" onfocus="focusHandler(event)" onblur="blurHandler(event)" /> <br><br> <div id="log-div" style="padding:10px;border:1px solid #ccd;"></div> </body> </html>
События focus, blur смоделированы для элементы которые "могут focus" (focusable), например <input>, <textarea>,.. При этом события focusin, focusout смоделированы для элементов, которые могут содержать другие элементы, как например <div>, <span>, <form>,..
focus vs focusin

Например у вас есть <form> с 2-мя подэлементами <input>. Когда пользователь прыгает в один из элементов <input> при этом произойдет событие focus. Событие focus в подэлементе создаст событие focusin в родительском элементе. Таким образом событие focusin произойдет в элементе <form>. Примечание: Несмотря на то, что событие focusin происходит в родительском элементе, но event.target возвращает подэлемент (Элемент создает событие focus).
blur vs focusout

Например у вас есть <form> с 2-мя подэлементами <input>. Когда пользователь выпрыгивает из элемента <input>, тогда происходит событие blur. Событие blur в подэлементе создаст событие focusout в родительском элементе. Таким образом событие focusout произойдет в элементе <form>. Примечание: Несмотря на то, что событие focusout происходит в родительском элементе, но event.target возвращает подэлемент (Элемент создает событие blur).
Example: focusin & focusout
focusin-focusout-example.html
<!DOCTYPE html> <html> <head> <title>FocusEvent</title> <meta charset="utf-8" /> <script src="focusin-focusout-example.js"></script> <style> form { border: 1px solid #ccc; padding: 10px; display: inline-block; } </style> </head> <body> <h3>Events: focusin & focusout</h3> <p>Focus to 'input' and Blur to it</p> <form onfocusin="focusinHandler(event)" onfocusout="focusoutHandler(event)"> User Name <input type="text" name="username" /> <br> <br> Email <input type="text" name="email" /> </form> </body> </html>
focusin-focusout-example.js
function focusinHandler(evt) { // <input> evt.target.style.border="1px solid blue"; // <form> evt.target.parentElement.style.border="1px solid red"; } function focusoutHandler(evt) { // <input> evt.target.style.border="1px solid black"; // <form> evt.target.parentElement.style.border="1px solid black"; }
У вас встречаются проблемы с onfocusout (???)
Для элементов <input>, <textarea>,.. вам нужно только обработать события focus, blur. Свойство (attribute) onfocusout не работает для данного элемента на некоторых браузерах (Я проверил данную проблему на браузерах Firefox, Chrome).
<input type="text"
onfocus="focusHandler(event)"
onblur="blurHandler(event)"
onfocusin="focusinHandler(event)"
onforcusout="focusoutHandler(event)"
/>
attr-onfocusout-not-working.html
<!DOCTYPE html> <html> <head> <title>FocusEvent</title> <script> function focusHandler(evt) { showLog("focus"); } function focusinHandler(evt) { showLog("focusin"); } function focusoutHandler(evt) { showLog("focusout"); } function blurHandler(evt) { showLog("blur"); } function showLog(msg) { var oldHtml= document.getElementById("log-div").innerHTML; document.getElementById("log-div").innerHTML=oldHtml + " .. "+ msg; } </script> </head> <body> <h3>Why does the 'onfocusout' attribute not work with 'input'?</h3> <input type="text" onfocus="focusHandler(event)" onblur="blurHandler(event)" onfocusin="focusinHandler(event)" onforcusout="focusoutHandler(event)" /> <br><br> <div id="log-div" style="padding:10px;border:1px solid #ccd;"></div> </body> </html>
Несмотря на то, что свойство (attribute) onfocusout не работает с элементом <input>, <textarea>,.. на некоторых браузерах. Но если вы хотите, вы можете регистрировать событие focusout для них по способу ниже:
// Javascript Code: var myInput = document.getElementById("my-input"); myInput.addEventListener("focus", focusHandler); myInput.addEventListener("focusin", focusinHandler); myInput.addEventListener("focusout", focusoutHandler); myInput.addEventListener("blur", blurHandler);
Смотрите полный пример:
focusevents-addEventListener-example.html
<!DOCTYPE html> <html> <head> <title>FocusEvent</title> <meta charset="utf-8"/> </head> <body> <h3>Test events: focus, focusin, focusout, blur</h3> <input id="my-input" type="text" /> <br><br> <div id="log-div" style="padding:10px;border:1px solid #ccd;"></div> <script src="focusevents-addEventListener-example.js"></script> </body> </html>
focusevents-addEventListener-example.js
function focusHandler(evt) { showLog("focus"); } function focusinHandler(evt) { showLog("focusin"); } function focusoutHandler(evt) { showLog("focusout"); } function blurHandler(evt) { showLog("blur"); } function showLog(msg) { var oldHtml= document.getElementById("log-div").innerHTML; document.getElementById("log-div").innerHTML=oldHtml + " .. "+ msg; } // Javascript Code: var myInput = document.getElementById("my-input"); myInput.addEventListener("focus", focusHandler); myInput.addEventListener("focusin", focusinHandler); myInput.addEventListener("focusout", focusoutHandler); myInput.addEventListener("blur", blurHandler);