Listener con una función Arrow

Hemos creado manejadores de eventos de diferentes formas en Javascript. Normalmente recurrimos a una función anónima para crear el manejador del evento, en este caso vamos a crear un listener con una función arrow. Veremos que el código que creamos para gestionar el manejador Javascript es muy sencillo.

Pero lo primero será preguntarnos, ¿qué es una función arrow? o función flecha. Las funciones flecha aparecen en ECMAScript 6 y son aquellas que nos permiten definir una función de forma sencilla siguiendo la siguiente estructura:

let nombre = (argumentos) => {
  sentencias;
  return valor_retorno;
}

De esta manera podríamos definir una función flecha para que gestionase un evento de la siguiente forma:

(ev) => {
  // Código del Manejador
}

Para poder verlo en un ejemplo vamos a imaginar que queremos codificar una página con un botón el cual, cada vez que se pulse, incremente un contador en el valor de uno.

Lo primero será crear los elementos HTML, tanto el botón con un elemento button como un campo input en el que mostraremos el valor del contador:

<form>
    <label for="mensaje">Valor: </label>
    <input id="mensaje" type="text" value="0"/>
    <button id="inc">+1</button>
</form>

Ahora crearemos un listener con una función arrow sobre el botón. Así que utilizaremos el método .addEvenListener() para poder asociar el manejador.

const boton = document.getElementById("inc");
const mensaje = document.getElementById("mensaje");

boton.addEventListener();

Ahora pasamos a definir el manejador mediante la función arrow dentro del método .addEvenListener()

boton.addEventListener("click", (ev)=>{
    let valor = parseInt(mensaje.value) + 1;
    mensaje.value = valor;
    ev.preventDefault();
});

Vemos que el manejador incrementa en uno el valor del campo input. Es importante que utilizamos la función .parseInt() que nos ayuda a convertir una cadena de texto a un número entero.

De esta forma tan sencilla hemos visto cómo crear un listener con una función arrow en Javascript.