Más eventos
Esto es solo para explicar cómo podemos escribir menos código cuando necesitamos utilizar varios eventos.
¿Que necesitamos?
De entrada necesitamos crear el array de los eventos: eventos del ratón ( mouse events ) y eventos tactiles ( touch events ) o de contacto.
const EVENTOS = ['mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'click', 'dblclick', 'wheel', 'select', 'touchend', 'touchenter', 'touchleave', 'touchmove', 'touchstart'];
Para saber que evento se dispara en cada momento podemos utilizar un bucle for de esta manera:
for (var i = 0, n = EVENTOS.length; i < n; i++){
div.addEventListener(EVENTOS[i], function(e) {
console.log(e.type);
}, false);
}
Vea este ejemplo en codepen. No olvide abrir la consola del navegador.
See the Pen eventos #1* by Gabi (@enxaneta) on CodePen.
También podemos crear funciones para cada evento ( o solo para algunos ), y guardarlas en un objeto. En este caso todas las funciones hacen lo mismo pero esto no tiene que ser así
var funcionesEventos = {
mousedown: function(e) {
console.log(e.type);
},
mouseenter: function(e) {
console.log(e.type);
},
mouseleave: function(e) {
console.log(e.type);
}
// y más funciones. . .
}
Ahora podemos invocarlas utilizando el bucle for.
for (var i = 0, n = EVENTOS.length; i < n; i++){
div.addEventListener(EVENTOS[i], function(e) {
if(funcionesEventos[e.type]){funcionesEventos[e.type](e)}
}, false);
}
Vea el código en codepen. No olvide abrir la consola del navegador.
See the Pen eventos #2* by Gabi (@enxaneta) on CodePen.