Cara menggunakan set lost focus javascript

Question

The focusout event fires when an element has lost focus, after the blur event. The two events differ in that focusout bubbles, while blur does not.

Table of Contents Show

The opposite of focusout is the focusin event, which fires when the element has received focus.

The focusout event is not cancelable.

Use the event name in methods like

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

0.

addEventListener('focusout', (event) => {});

A

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

1. Inherits from

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

2.

EventUIEventFocusEvent

This interface also inherits properties from its parent

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

3, and indirectly from

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

2.

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

5

The element receiving focus, if any.

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 = '';
});