Normalmente, cuando agrega eventlisteners, haría lo siguiente:
input.addEventListener('keyup', function(e){// get e.keyCode here});Pero, ¿qué sucede si definí una función en otro lugar y solo quiero pasar la función como una variable? Se vería algo como esto:
input.addEventListener('keyup', func); ¿Cómo paso la e como argumento aquí (o cualquier otro argumento en general)? Gracias.
Simplemente declare un parámetro para la función. La sintaxis es la misma para las funciones con nombre que para las expresiones de funciones anónimas.
document.querySelector('input').addEventListener('keyup', func); function func(e /* event object */ ){ console.log(e.keyCode); } Type something here: <input>Use una función con nombre que pase e . e es el objeto de evento que todos los controladores de eventos pasan por defecto. Un controlador de eventos es la función a la que se llama cuando se activa un evento registrado. Un evento se registra cuando es el primer parámetro de un detector de eventos:
.addEventListener('keyup', eventHandler)O una propiedad de un solo evento
.onkeyup = eventHandler;O un atributo en línea (no use este, no es bueno )
<input onkeyup='eventHandler(e)'>En el siguiente ejemplo, A es una función anónima y B es lo mismo que A pero tiene una función con nombre como controlador de eventos.
const inputA = document.querySelector('.A'); const inputB = document.querySelector('.B'); // Anonymous event handler inputA.addEventListener('keyup', function(e){ console.log(e.key); }); // Named event handler inputB.addEventListener('keyup', keyHandler); function keyHandler(e) { console.log(e.key); } <label>A: <input class='A'></label><br> <label>B: <input class='B'></label>No necesita pasarlo explícitamente
function func(e) { console.log(e.target.value) } document.getElementById('input').addEventListener('keyup', func) <input id='input'>