Element: focusin event

{{APIRef("UI Events")}}

The focusin event fires when an element has received focus, after the {{domxref("Element/focus_event", "focus")}} event. The two events differ in that focusin bubbles, while focus does not.

The opposite of focusin is the {{domxref("Element/focusout_event", "focusout")}} event, which fires when the element has lost focus.

The focusin event is not cancelable.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}} , or set an event handler property.

addEventListener("focusin", (event) => { })

onfocusin = (event) => { }

Event type

A {{domxref("FocusEvent")}} . Inherits from {{domxref("UIEvent")}} and {{domxref("Event")}} .

{{InheritanceDiagram("FocusEvent")}}

Event properties

This interface also inherits properties from its parent {{domxref("UIEvent")}} , and indirectly from {{domxref("Event")}} .

{{domxref("FocusEvent.relatedTarget")}}
- : The element losing focus, if any.

Examples

Live example

HTML

<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});

Result

{{EmbedLiveSample("Live_example", '100%', '50px')}}

Specifications

{{Specifications}}

[!NOTE] The UI Events specification describes an order of focus events that’s different from what current browsers implement.

Browser compatibility

{{Compat}}

docs.rodeo

MDN Web Docs mirror