Escuchando eventos
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:var p = document.querySelector("p");
p.addEventListener("click", function() {
alert("Hello");
});
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:var ps = document.querySelectorAll("p");
ps.forEach(function(p) {
p.addEventListener("click", function() {
alert("Hello");
});
});
Los eventos más comunes que puedes escuchar del mouse son los siguientes:
click
dblclick
- doble clickmouseenter
- 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:document.addEventListener('mousemove', function(e) {
console.log("El mouse se encuentra en las coordenadas:" + e.pageX + ", " + e.pageY);
});
Existen tres eventos que puedes escuchar del teclado:
keydown
- se dispara cuando oprimes una tecla.keypress
- similar akeydown
pero no aplica para teclas comoShift
,Esc
,Alt
.keyup
- se dispara cuando sueltas una tecla.
El método
which
del evento retorna el código de la tecla oprimida:document.addEventListener('keyup', function(e) {
console.log("La tecla oprimida fue " + e.which);
});
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.
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:
var a = document.querySelector("a");
a.addEventListener('click', function(e) {
e.preventDefault();
alert("Oprimiste un link pero ha sido interceptado ... muajaja");
});
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:var p = document.querySelector("p");
p.addEventListener('click', function(e) {
e.stopPropagation();
alert("Este evento no se va a propagar a los padres");
});
Last modified 2mo ago