2

Para que me sirve y que significa el callback que realiza el método addEventListener como por ejemplo:

window.addEventListener("load", function(e){
   // Cualquier cosa
});

¿ Para que me serviría el parámetro e?

2
  • El parámetro e es básicamente un Event y puede tener muchas utilidades ya que esta variable posee información relevante del evento esto se puede dar cuenta fácilmente haciendo un console.log(e); simple.
    – Dev. Joel
    Commented el 25 jun. 2017 a las 4:41
  • Un callback es función que se ejecuta una vez que completa una acción, evento, etc. y es asincrónica por defecto.
    – Mvochoa
    Commented el 25 jun. 2017 a las 4:54

1 respuesta 1

4

Para empezar.

En JavaScript, como en muchos lenguajes de programación, es muy común que a una función se le pueda pasar como parámetro otra función, esto es muy normal, en JavaScript lo podemos conocer como las funciones anónimas, un ejemplo claro de esto seria:

$funcion = function(){
  alert("Soy una funciona anonima.");
};

function llamarFuncion($funcion){
  $funcion();
}

llamarFuncion($funcion);

Aunque bien, aquí solo vemos la creación de una variable, y asignamos a ella una función, este ejemplo de una manera mas simplificada seria:

function llamarFuncion($funcion){
  $funcion();
}

llamarFuncion(function(){
  alert("Soy una funciona anonima.");
});

Notamos que pudimos pasar una función como un parámetro a otra función.


Que es un callback?

Al igual que lo que explique anteriormente, un callback es una función que se llamada dentro de otra función, que bien, en algunos casos (e.j: jQuery) suele ejecutarse después de que un evento ha ocurrido, mas en lo normal (como en el ejemplo que planteas) es la asociación de un evento con una funcion, un ejemplo seria:

document.getElementById("boton").addEventListener("click",   function(e){
  alert("Click");   
});
<input type="button" id="boton" value="Click">

Esto lo que quiere decir en pocas palabras es:

Asociar el evento "click" al elemento con identificador "boton" y que al presionar sobre el boton la funcion anonima se ejecute, mostrando una alerta con el mensaje "Click".


Que significa la e?

Quizá para el ejemplo del evento click, no te sabría dar un ejemplo, pero si te puedo dar una explicación.

Al realizar el llamado de la función de callback, esta puede obtener ciertos parámetros, que como resultado de la ejecución de dicha función, podrían ser usados posteriormente en nuestro programa, pero vamos al grano y miremos un ejemplo:

document.getElementById("campo").addEventListener("keyup", function(e){

   var codigoTecla = (e.keyCode ? e.keyCode : e.which);

   if(codigoTecla >= 65 && codigoTecla <= 90){
    alert("Presionaste una tecla del abecedario");
   }

   if(codigoTecla === 13){
    alert("Presionaste Enter");
   }

});
<input type="text" id="campo" placeholder="Escribe algo...">

Notas la instrucción:

var codigoTecla = (e.keyCode ? e.keyCode : e.which);

Dicha instrucción utiliza la variable e, para obtener un dato, en este caso la función keyCode(), nos devuelve el código ASCII de la tecla presionada, todo esto ocurre porque en la ejecución del callback, la función que lo ejecuta, pasa algunos parámetros que puedes usar posteriormente.

A esta variable, se le conoce como un evento, esta variable suele contener información respecto a lo que a ocurrido con el elemento HTML.

1
  • muchas gracias, y ahora veo que los eventos tienen muchas propiedades y metodos
    – ESCM
    Commented el 26 jun. 2017 a las 16:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.