Novedades ES6

Eventos onFocus y onBlur

El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur cuando el objeto pierde el foco.

El evento onFocus se ejecuta cuando un componente de nuestra web toma el foco, y el onBlur justamente lo contrario, se ejecuta cuando el componente pierde el foco.

Definición y uso de onfocus 

La propiedad onfocus devuelve un manejador de eventos para el evento onFocus en el elemento actual. El evento onfocus ocurre cuando un elemento se enfoca un <input>, <select> y <a>.

El evento onfocus se usa con mayor frecuencia con <input>, <select> y <a>.

element.onfocus = event handling code

El evento focus se dispara cuando el usuario establece el foco en el elemento. Este evento es compatible con TODOS los elementos HTML EXCEPTO los elementos HTML : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>

Consejo: el evento onfocus es lo opuesto al evento onblur .
Consejo: el evento onfocus es similar al evento onfocusin . La principal diferencia es que el evento onfocus no burbujea. Por lo tanto, si desea saber si un elemento o su hijo obtiene el foco, puede usar el evento onfocusin. Sin embargo, puede lograr esto utilizando el parámetro opcional useCapture del método addEventListener () para el evento onfocus.

Definición y uso de onblur 


La propiedad onblur devuelve un manejador de eventos para el evento onBlur  en el elemento actual. El evento onblur ocurre cuando un elemento se sale de un elemento HTML como puede ser  un <input>, <select> y <a>.

El evento onblur ocurre cuando un objeto pierde el foco.

element.onblur = event handling code

El evento onblur se usa con mayor frecuencia con el código de validación de formulario (por ejemplo, cuando el usuario deja un campo de formulario).
El evento onblur se dispara cuando el usuario establece el sale del elemento. Este evento es compatible con TODOS los elementos HTML EXCEPTO los elementos HTML : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>

Consejo: el evento onblur es lo opuesto al evento onfocus
Consejo: el evento onblur es similar al evento onfocusout . La principal diferencia es que el evento onblur no burbujea. Por lo tanto, si desea saber si un elemento o su hijo pierde el foco, puede usar el evento onfocusout. Sin embargo, puede lograr esto utilizando el parámetro opcional useCapture del método addEventListener () para el evento onblur.

Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Cuando ingresa al campo de entrada (secundario de FORM), se activa una función que establece el color de fondo en amarillo. Cuando abandona el campo de entrada, se activa una función que elimina el color de fondo..</p>

<form id="myForm">
  <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}

function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = "red"; 
}

</script>
</body>
</html>