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

View more Tutorials:

Pуководства ECMAScript, Javascript

FocusEvent
focusin, focusout

1- FocusEvent

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>

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).

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);

View more Tutorials:

Pуководства ECMAScript, Javascript