Múltiples event listeners en JavaScript

22/Ago/2016 769

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. takipçi satın al [#]

    İnstagram hesabına türk takipçi göndermek için takipcisepette’den instagram takipçi satın al.

  2. Takipçi Satın Al [#]

    İnstagram türk ve aktif güvenilir takipci, ucuz takipçi takipcisepette sitesinde. Sende tıkla ve instagram takipçi satın al.

  3. beğeni satın al [#]

    Hi there, every time i used to check website posts here
    early in the dawn, because i like to learn more and more.

  4. İnstagram Takipçi Satın Al [#]

    İnstagram hesabına türk takipçi göndermek için takipcisepette’den instagram takipçi satın al.

  5. Oiuujd [#]

    85g prednisone – buy prednisone 10mg online generic prednisone 20mg online

  6. buy Instagram followers [#]

    Great delivery. Solid arguments. Keep up the great spirit.

    my site: buy Instagram followers

  7. Zffgvr [#]

    prednisone 20mg price in india – deltasone without script online prednisone 2 mg tablets

  8. Takipçi satın al [#]

    İnstagram takipçi satın al son zamanlarda binlerce kişi tarafından araştırılmaktadır. İnstagram takipçi satın al hizmetinden faydalanmak için alacağınız sitenin güvenilir olması gerekmektedir. Güvenilir instagram takipçi satın almak için bizi tercih etmenizde fayda vardır. İnstagram takipçi satın al hizmeti için en güvenilir site ile karşınızdayız!

  9. delta 8 THC gummies [#]

    Thanks for your marvelous posting! I actually enjoyed reading it, you
    will be a great author. I will be sure to
    bookmark your blog and definitely will come back sometime
    soon. I want to encourage you continue your great posts, have a nice day!

    My page delta 8 THC gummies

  10. İnstagram Takipçi Satın Al [#]

    Sosyal medya uygulamalarının en popüler uygulaması instagram için hemen takipçi satın al. İnstagram ucuz takipçi satın almak için websitemizi ziyaret et ve hemen en ucuz takipçi satın al.

  11. İnstagram Takipçi Satın Al [#]

    İnstagram hesabının etkileşimini arttırmak için, ucuz ve güvenilir instagram takipçi satın alma hizmetini dene.

  12. instagram takipçi satın al [#]

    İnstagram hesabın için güvenilir bir şekilde instagram güvenilir takipçi satın al.

  13. takipçi satın al [#]

    Türk ve aktif güvenilir takipçi, takipcisepette’de! Sende gel ve güvenilir takipçi satın al.

  14. delta 8 THC gummies [#]

    Hey there! I’ve been reading your web site for a long time now and finally got the courage to go
    ahead and give you a shout out from Lubbock Tx!

    Just wanted to say keep up the good job!

    Look into my web blog: delta 8 THC gummies

  15. instagram takipçi satın al [#]

    En güvenilir takipçi hizmeti ayağınıza kadar geldi. Takipçi, beğeni, izlenme siparişiniz 5 dakika’da alınır ve hesabınıza hemen teslim edilir. Sizde instagram takipçi satın almak için tıklayın ve ucuz takipçi satın alarak, takipçi sayınızı ikiye katlayın.

  16. Halısı [#]

    Cami Halısı

    Cami halısı satın alırken mutlaka kaliteye odaklanmanız gerekir.
    Sıradan bir yün cami halısı almak yerine kaliteli bir halı
    tercihinde bulunarak uzun ömürlü bir ürüne kavuşabilirsiniz.
    Cami halısı fiyatları kalitesi ve model özelliklerine göre değişim gösterebiliyor.
    Tercih edilecek cami halılarında fiyatı etkileyen en önemli konulardan bir tanesi ebatlarıdır.
    Camiler için tercih edilecek halıların ölçüler yapıya
    göre değişiklik gösteriyor. Cami halı
    fiyatı ölçü ve malzeme tercihinin ardından belirlenir.
    Firmamız bu adres üzerinden uygun fiyatlı cami halılarını tek
    tıkla elinizin altına getiriyor. Kaliteden ödün vermeyen firmamız, fiyat konusunda da
    beklentileri karşılıyor. İbadet için gittiğimiz camilerde deforme olmuş cami halıları ile karşılaşabiliriz.
    Bu da insanların rahat şekilde ibadet etmelerine engel olabilir.

    Biz bu tür sorunların önüne geçmek için yüksek kaliteli cami halısı modellerini satışa çıkarıyoruz.

    Halıları

  17. Takipçi Satın Al [#]

    İnstagram takipçi satın al ve hesabını yükselişe geçir! Ucuz instagram takipçi satın alma paketleri sunan sitemiz ile takipçi sayınızı yükselişe geçirmeye başlayın. Kaliteli ve aktif instagram takipçi satın alma paketleri sunan sitemiz ile hesabınızı popüler hale getirin. İnstagram takipçi satın al hizmetini kullanmak için Türkiye’nin en güvenilir instagram takipçi satın alma sitesini ziyaret edin.

Deja tu Comentario

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

CSSLab