Cодержание

Руководство Javascript FocusEvent

1- FocusEvent

FocusEvent это интерфейс представляющий события связанные с focus, точнее 4 события  focus, focusin, blur, focusout.
  • TODO Link!
Свойства (property):
Свойство Описание
relatedTarget Возвращает элемент связанный с элементом, который активировал событие.
Если вы перепрыгните на элемент, потом выпрыгните наружу (focus в другой элемент), то будет 4 события, что произойдут по-порядку:
  1. focus
  2. focusin
  3. blue
  4. 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>
 

2- focusin, focusout

События  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);