Bienvenidos sean a este post, hoy hablaremos sobre una de las mejores implementaciones de Javascript a la hora de interactuar con eventos como es el metodo del titulo, como lo indica su nombre en ingles se encarga de agregar un «escuchador» de evento.
Este metodo se implementa a partir de HTML5 para evitar el uso de eventos en los objetos HTML porque de esta forma no respeta el proposito principal de HTML5:
- HTML, define la estructura del documento
- CSS, define la presentacion del mismo
- Javascript, define su funcionalidad
Y si bien nosotros tambien disponemos de eventos en Javascript en algunas circunstancias puede ser contraproducente, para evitar estos inconvenientes se agregaron los siguientes dos metodos en el objeto Window:
- addEventListener(evento, listener, captura), este metodo prepara un elemento para responder a un evento, el primer atributo sera el nombre del evento en si (p.e. click), el segundo sera relacionado a la funcion que procesara el evento, el tercer valor es un valor booleano que determina si el evento es capturado por el elemento o se dispersara por otros elementos, en general se lo setea como false.
- removeEventListener(evento, listener), este metodo remueve el listener o funcion del evento informado.
El nombre del evento en realidad no es el mismo que utilizamos hasta ahora, como onClick u onLoad, sino que en realidad son sin la palabra on en la misma quedando como click, load, mouseover, etc. para entender mejor este concepto vamos el siguiente ejemplo:
escuchador.html
<html>
<head>
<title>Metodo addEventListener()</title>
</head>
<body>
<img id="foto" width="640" height="360" src="https://tinchicusplays.files.wordpress.com/2019/03/hollow-knight_20190304133915.jpg">
</body>
<script language="javascript">
var foto=document.getElementById("foto");
function porarriba()
{
alert("Ahhh!! Maus encima!!!");
}
function porfuera()
{
alert("Uff, que alivio!!!");
}
foto.addEventListener("click",function(){
alert("Hiciste click!");
},false);
foto.addEventListener("mouseover",porarriba,false);
foto.addEventListener("mouseout",porfuera,false);
</script>
</html>En este codigo primero hicimos la pagina y luego agregamos el tag SCRIPT, en la pagina solo agregamos una imagen a traves de un tag IMG con un id con el valor foto, pasando al tag SCRIPT primero crearemos una variable llamada foto donde le asignaremos al IMG llamado foto por medio de getElementById, luego crearemos dos funciones una llamada porarriba que nos mostrara un mensaje y otra funcion llamada porfuera que nos mostrara otro mensaje, por ultimo agregaremos tres eventos a nuestra imagen por medio de la variable foto, en el primer caso lo vinculamos con el evento click, utilizamos una funcion anonima donde nos muestra un mensaje, para el siguiente evento usamos a mouseover (el mouse por encima) a lo cual llamara a la funcion porarriba, pero sin los parentesis, para el siguiente evento usamos a mouseout (el mouse saliendo de encima) y llamara a la funcion porfuera, tambien sin parentesis, y en ambos casos devolvemos un false, si probamos el codigo veremos algo similar a esto
En este caso podemos ver como funcionan perfectamente los tres eventos que creamos ya sea cuando estamos arriba de la imagen, cuando sacamos el cursor de la misma o hacemos click sobre ella.
En resumen, hoy hemos visto como al metodo addEventListener, cual es su funcion, como trabaja, su sintaxis, porque se implemento, su contraparte aunque no la hayamos aplicado, y un ejemplo donde pusimos en practica a eventos mediante codigo, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 