Múltiples event listeners en JavaScript

22/ago/2016 0

En JavaScript, para agregar un evento a un selector ó un conjunto de ellos se utiliza comúnmente addEventListener() pero que tiene una sutil limitación: sólo puedes darle 1 evento a la vez.

¿Por qué querría agregar más de un evento a un elemento?

Suena a locura pero puede suceder, principalmente en selectores HTML para formularios. La última vez que lo necesité fue para un elemento input de tipo number el cual agrega flechas para cambiar el valor, por lo que puedes ingresar un número por el teclado ó utilizando las flechas. Con eso, necesité escuchar el evento keyup y change para poder hacer algo con ese valor posteriormente:

JS Bin on jsbin.com

/**
 * multipleEventsListeners.js
 * Add the capability to attach multiple events to an element, just like jQuery does
 * https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b
 */
 
function multipleEventsListeners(elem, events, func) {
  var event = events.split(' ');
  for (var i = 0; i < event.length; i++) {
    elem.addEventListener(event[i], func, false);
  }
}

/*
Use: 
var input = document.querySelector('input');
multipleEventsListeners(input, 'keyup change', function(e){
  console.log(this.value);
});
*/

ES6:

function multipleEventsListeners(elem, events, func) {
  events.split().forEach(e => elem.addEventListener(e, func, false));
}

/*
Use: 
const input = document.querySelector('input');
multipleEventsListeners(input, 'keyup change', function(e) {
  console.log(this.value);
});
*/

Link:

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab