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
?
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.
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".
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.
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 unconsole.log(e);
simple.