Múltiples event listeners en JavaScript

22/ago/2016 2

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:

Comentarios

  1. Reina [#]

    justo lo que buscaba :/

  2. Fabrico [#]

    Hola, su ejemplo es justo lo que estaba buscando, pero al implementarlo no me sale nada en la consola.
    ¿Usted probo si el ejemplo funcionaba?

Deja tu Comentario

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

CSSLab