Guías de Make it Real
Search…
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: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:
clickdblclick- 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:1
document.addEventListener('mousemove', function(e) {
2
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 akeydownpero 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:1
document.addEventListener('keyup', function(e) {
2
console.log("La tecla oprimida fue " + e.which);
3
});
Copied!
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");
5
});
Copied!
Last modified 2yr ago