los focus el evento se activa cuando un elemento ha recibido el foco. La principal diferencia entre este evento y focusin es eso focusin burbujas mientras focus no.

Lo contrario a focus es blur.

Burbujas No
Cancelable No
Interfaz FocusEvent
Propiedad del controlador de eventos onfocus
Sincronización / asincrónica Sincronizar
Compuesto sí

Ejemplos de

Ejemplo simple

HTML

<formid="form"><inputtype="text"placeholder="text input"><inputtype="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 ='';);

Resultado

Delegación de eventos

Hay dos formas de implementar la delegación de eventos para este evento: mediante el focusin evento, o configurando el useCapture parámetro de addEventListener() para true.

HTML

<formid="form"><inputtype="text"placeholder="text input"><inputtype="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);

Resultado

Especificaciones

Especificación Estado Comentario
Eventos de UI Borrador de trabajo Añadida información de que está compuesto este evento.
Modelo de objetos de documento (DOM) Nivel 3 Especificación de eventos Obsoleto Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
focus_event 1 12 246-24 La interfaz para este evento es Event, no FocusEvent. 9 11,6 3.1 1 18 246-24 La interfaz para este evento es Event, no FocusEvent. 12,1 2 1.0

Ver también

  • Eventos relacionados: blur, focusin, focusout
  • Este evento en Window objetivos: focus evento