Para escuchar eventos (del mouse, teclado, etc.) utiliza el método addEventListener sobre cualquier elemento. Por ejemplo, si queremos escuchar el evento click del primer párrafo utilizaríamos el siguiente código:
1
var p = document.querySelector("p");
2
p.addEventListener("click",function(){
3
alert("Hello");
4
});
Copied!
Primero estamos seleccionamos el elemento sobre el que queremos escuchar los eventos. El método addEventListener recibe el nombre del evento (en este caso el click) y una función que se ejecuta cuando ocurre el evento.
A la función que recibe el método addEventListener se le llama un callback y puede recibir un argumento con información del evento. De esto hablaremos más adelante.
Para escuchar los eventos de varios elementos seleccionados con querySelectorAll debes realizar lo siguiente:
1
var ps = document.querySelectorAll("p");
2
3
ps.forEach(function(p){
4
p.addEventListener("click",function(){
5
alert("Hello");
6
});
7
});
Copied!
Eventos del mouse
Los eventos más comunes que puedes escuchar del mouse son los siguientes:
click
dblclick - doble click
mouseenter - se dispara cuando el mouse entra sobre alguno de los elementos seleccionados.
mouseleave - se dispara cuando el mouse sale de alguno de los elementos seleccionados.
mouseover - se dispara cuando el mouse entra o sale de alguno de los elementos seleccionados.
mousemove - se dispara cuando el mouse se mueve dentro de alguno de los elementos seleccionados.
La función que le pasamos al método addEventListener recibe un argumento con información del evento. Por ejemplo, a través de este objeto podemos obtener la posición del mouse cada vez que se mueve:
console.log("El mouse se encuentra en las coordenadas:"+ e.pageX +", "+ e.pageY);
3
});
Copied!
Eventos del teclado
Existen tres eventos que puedes escuchar del teclado:
keydown - se dispara cuando oprimes una tecla.
keypress - similar a keydown pero no aplica para teclas como Shift, Esc, Alt.
keyup - se dispara cuando sueltas una tecla.
El método which del evento retorna el código de la tecla oprimida:
1
document.addEventListener('keyup',function(e){
2
console.log("La tecla oprimida fue "+ e.which);
3
});
Copied!
Para ver la lista de códigos y a qué tecla corresponden sigue este enlace.
Eventos sobre formularios
Sobre los formularios (y los elementos del formulario) puedes escuchar los siguientes eventos:
blur - se dispara cuando un elemento pierde el foco.
change - se dispara cuando un elemento cambia.
focus - se dispara cuando un elemento recibe el foco.
submit - se dispara cuando el formulario se envía.
Evitando la acción por defecto
Para evitar que ocurra la acción por defecto (p.e. que un link no cambie la página o que un formulario no sea enviado) puedes utilizar el método preventDefault() sobre el argumento que llega en la función.
Por ejemplo, el siguiente ejemplo intercepta todos los clicks sobre links y evita que cambie la página:
1
var a = document.querySelector("a");
2
a.addEventListener('click',function(e){
3
e.preventDefault();
4
alert("Oprimiste un link pero ha sido interceptado ... muajaja");
5
});
Copied!
Delegación de eventos
La mayoría de eventos se disparan primero sobre el elemento que ocurren, y después se disparan sobre el elemento padre, el padre del padre, y así sucesivamente hasta document, y por último window.
Para detener este proceso puedes utilizar el método stopPropagation del evento:
1
var p = document.querySelector("p");
2
p.addEventListener('click',function(e){
3
e.stopPropagation();
4
alert("Este evento no se va a propagar a los padres");