Múltiples event listeners en JavaScript

22/Ago/2016 1759

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 [#]

    en uygun fiyatlar ile ucuz takipçi satın al işlemini sitemiz üzerinden yapabilirsiniz.

  2. pdf kitap [#]

    Web sayfamızı ziyaret ederek istediğiniz bilgilere ulaşabilirsiniz.

  3. bactrim coverage [#]

    trimoxazole bactrim ds side effects

  4. smm panel [#]

    Sosyal medyada farklı olmak ve orijinal içerikler üreterek para kazanmak günümüzün meslekleri haline geldi. Hatta öyle ki bu meslekler öğretmenlik, mühendislik ve hatta doktorluk gibi geleneksel mesleklerden bile daha fazla kazanır durumda. Haliyle herkes sosyal medyada takipçi sayısını, video izlenmelerini artırmak istiyor. Bu noktada smm panel olarak bilinen hizmet karşımıza çıkıyor. Smm panel temelde bütün sosyal medya uygulamalarında takviye olarak izlenme, takipçi ve beğeni gibi hizmetler sunar. Jokersmm ise smm panel sektöründe bilinen ve uzun yıllardır hizmet veren bir şirket. Sitelerini ziyaret ederek uygun fiyata Instagram, Twitter, Snapchat, TikTok ve Facebook gibi uygulamalarda kullanılabilecek takipçi, beğeni ve izlenme satın alınabiliyor. Smm panel en önemli özelliği ise hızlı gönderim yapılmasıdır. 24 saatten kısa sürede binlerce takipçi veya izlenme satın almak mümkün. Üstelik birçok paketin belli oranda telafileri mevcutken; Jokersmm ayrıca kullanıcılarına bakiye yüklemelerinde bonus da hediye ediyor. Bu bonuslar sayesinde daha ucuz takipçi satın almak da mümkün. Sosyal medyada yükselmek ve daha fazla kişiye ulaşmak isteyenlerin en sık kullandığı servis olan jokersmm hizmetinizde.

  5. celtabet [#]

    Celtabet bahis sitesi Çurocou lisansına sahip yabancı menşeeili ama Türkiye’deki bahis severlere yatırım ve kazanç imkanı sağlayan bir sitedir.

  6. lottocandy2 [#]

    I every time used to study post in news papers but now
    as I am a user of web so from now I am using net for articles, thanks to web.

  7. bedavainternetiniz.com [#]

    Bedava internet sayesinde Turkcell, Vodafone ve Türk Telekom gibi hatların bedava internet kampanyalarından faydalanın. Ücretsiz internet kullanma keyfine varın.
    bedavainternetiniz.com

CSSLab