Existen numerosas categorías de eventos de JavaScript, pero en este artículo, enfatizaremos el uso del enfoque de JavaScript y los eventos de desenfoque.
JavaScript Focus and Blur Events
Cuando los elementos HTML se enfocan o pierden el enfoque, ocurren los eventos de enfoque o desenfoque de JavaScript que son parte del objeto FocuseVent.
Los eventos que se clasifican en la categoría de JavaScript Focus and Blur Events se demuestran a continuación:
Cada uno de los eventos mencionados anteriormente se analiza a continuación.
Evento de Onblur
El evento Onblur ocurre cuando se pierde el enfoque de un objeto. Se usa principalmente dentro del código de validación de un formulario. No burbujea y no se puede cancelar. Admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento Onblur es la siguiente.
Sintaxis html
Sintaxis de JavaScript
objeto.onblur = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("blur", script);Ejemplo
La función cambiará las letras en minúsculas a las letras mayúsculas.
Producción
Cuando deja el campo de entrada, se produce el evento Onblur y las letras de los casos inferiores se desplazan a la letra de los casos superiores.
Evento de Onfocus
El evento Onfocus ocurre cuando se enfoca un elemento. Se usa principalmente con, y . No burbujea y no se puede cancelar. Admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento Onfocus es la siguiente.
Sintaxis html
Sintaxis de JavaScript
objeto.onfocus = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("enfoque", script);Ejemplo
Una función cambia el color de fondo del campo de entrada cuando está enfocado.
Producción
Cuando hace clic en el campo de entrada, el color de fondo del campo de entrada se cambiará a azul. Hemos mostrado el estado anterior y posterior del campo de entrada a continuación.
Antes
Después
Evento de Onfocusin
El evento Onnfocusin es el mismo como el evento Onfocus y ocurre cuando un elemento solo obtiene el enfoque, sin embargo, una diferencia sutil entre estos dos es que este evento (Onfocusin) burbujean y no se puede cancelar. Admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento Onfocusin es la siguiente.
Sintaxis html
Sintaxis de JavaScript
objeto.onfocusin = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("Focusin", Script);Ejemplo
Haga clic en el campo de entrada
Producción
Antes de hacer clic en el campo de entrada.
Después de hacer clic en el campo de entrada, el color de fondo del campo de entrada se cambiará a rosa.
Evento de Onfocusout
El evento Onnfocusout es el mismo como el evento Onblur y ocurre cuando un elemento solo pierde el enfoque, sin embargo, una sutil diferencia entre estos dos es que estas burbujas (Onfocusout) y no se pueden cancelar. Admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento Onfocusout es la siguiente.
Sintaxis html
Sintaxis de JavaScript
objeto.onfocusout = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("Focusout", script);Ejemplo
Deje el campo de entrada para cambiar las letras de caso inferior al caso superior.
Producción
Cuando salga del campo de entrada, las letras minúsculas se cambiarán a letras mayúsculas.
Conclusión
Los eventos que ocurren cuando un elemento gana o pierde su enfoque se conoce como JavaScript Focus y Desenfoque los eventos. Los eventos que se clasifican en la categoría de JavaScript Focus y Blur Events son el evento Onblur, el evento Onfouc, el evento Onfocusin y el evento Onfocusout. Todos estos eventos se discuten en detalle junto con el ejemplo apropiado.