Element: focus event

The focus event fires when an element has received focus. The main difference between this event and focusin is that focusin bubbles while focus does not.

The opposite of focus is blur.

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

const password = document.querySelector('input[type="password"]');

password.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';
});

password.addEventListener('blur', (event) => {
  event.target.style.background = '';
});

Result

There are two ways of implementing event delegation for this event: by using the focusin event, or by setting the useCapture parameter of addEventListener() to true.

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

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

form.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', (event) => {
  event.target.style.background = '';
}, true);

Result

• Related events: blur, focusin, focusout
• This event on Window targets: focus event