⇪

Más eventos

facebook-svg gplus-svg twitter-svg

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.