JavaScript/DOM/Event/focusin

Der focusin-Event-Handler wird ausgelöst, wenn ein Element angeklickt wird. Anders als bei onfocus steigt dieser Event-Handler auf (Event-Bubbling).

bubbles	ja
cancelable	nein
mögliche Auslöser	allen Elementen, außer im head
Event-Objekt	FocusEvent

Beispiel ansehen …

  <form name="Test" action="">
    Name: <input type="text" id="Eingabe" onfocusin="rein(this)" onfocusout="raus(this)"><br>
    Geben Sie irgendetwas ein und klicken Sie dann woanders hin, um das Eingabefeld zu verlassen!
  </form>

<script>
  function rein (Feld) {
      Feld.style.background = "#e7c157";
  }
    function raus (Feld) {
      Feld.style.background = "#ebf5d7";
  }

In dem Beispiel wird ein Formular definiert. Bewegen Sie den Cursor in das Eingabefeld, wird der Event-Handler focusin des jeweiligen Feldes aktiv. Dabei wird das Feld gelb eingefärbt. Wenn man es verlässt, feuert focusout und das Feld wird grün.

Beachten Sie: In Chrome, Opera und Safari kann es bei der JavaScript DOM Syntax zu Problemen kommen, als HTML-Attribut funktioniert es jedoch.

Empfehlung: Firefox unterstützt den focusin-Event-Handler nicht. Sie können aber trotzdem mittels focus und dem dritten Parameter von addEventListener(event, function, UseCapture) abfragen, ob ein Element den focus hat.