107 votes

Ajouter plusieurs écouteurs d'événements à un seul élément

Alors mon dilemme est que je ne veux pas écrire le même code deux fois. Une fois pour l'événement de clic et une autre pour l'événement touchstart.

Voici le code original:

document.getElementById('first').addEventListener('touchstart', function(event) {
    do_something();
    });

document.getElementById('first').addEventListener('click', function(event) {
    do_something(); 
    });

Comment puis-je simplifier cela ? Il DOIT y avoir un moyen plus simple!

4voto

Armin Points 53

La solution la plus simple pour moi a été de passer le code dans une fonction séparée, puis d'appeler cette fonction dans un écouteur d'événements, cela fonctionne à merveille.

function somefunction() { .. le code va ici ..}

variable.addEventListener('keyup', function() {
   somefunction(); // appel de la fonction lors de l'événement keyup
})

variable.addEventListener('keydown', function() {
   somefunction(); // appel de la fonction lors de l'événement keydown
})

4voto

Je suis nouveau dans le codage JavaScript, alors pardonnez-moi si je me trompe. Je pense que vous pouvez créer un objet et les gestionnaires d'événements de cette façon :

const myEvents = {
  click: clickOnce,
  dblclick: clickTwice,
};

function clickOnce() {
  console.log("Once");
}

function clickTwice() {
  console.log("Twice");
}

Object.keys(myEvents).forEach((key) => {
  const myButton = document.querySelector(".myButton")
  myButton.addEventListener(key, myEvents[key]);
});

Bouton

Et ensuite cliquez sur l'élément.

2voto

Strauss Bornman Points 41

J'ai une petite solution qui se joint au prototype

EventTarget.prototype.addEventListeners = function(type, listener, options, extra) {
  let arr = type;
  if(typeof type == 'string'){
    let sp = type.split(/[\s,;]+/);
    arr = sp;   
  }
  for(let a of arr){
    this.addEventListener(a,listener,options,extra);
  }
};

Vous permet de lui donner une chaîne de caractères ou un tableau. La chaîne peut être séparée par un espace (' '), une virgule (',') OU un point-virgule (';')

2voto

Ian Pollak Points 83

J'ai juste créé cette fonction (intentionnellement minifiée) :

((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element, events, handler)

Utilisation :

((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element, ['click', 'touchstart'], (event) => {
    // corps de la fonction
});

La différence par rapport à d'autres approches est que la fonction de gestion est définie une seule fois puis passée à chaque addEventListener.

EDIT :

Ajout d'une version non-minifiée pour la rendre plus compréhensible. La version minifiée était destinée à être simplement copiée-collée et utilisée.

((element, event_names, handler) => {

    event_names.forEach( (event_name) => {
        element.addEventListener(event_name, handler)
    })

})(element, ['click', 'touchstart'], (event) => {

    // corps de la fonction

});

2voto

Hasan A Yousef Points 4851

Que diriez-vous de quelque chose comme ceci :

['focusout','keydown'].forEach( function(evt) {
        self.slave.addEventListener(evt, function(event) {
            // Ici `this` correspond à l'esclave, c'est-à-dire `self.slave`
            if ((event.type === 'keydown' && event.which === 27) || event.type === 'focusout') {
                this.style.display = 'none';
                this.parentNode.querySelector('.master').style.display = '';
                this.parentNode.querySelector('.master').value = this.value;
                console.log('out');
            }
        }, false);
});

// Ce qui précède remplace :
 /*   self.slave.addEventListener("focusout", function(event) { })
      self.slave.addEventListener("keydown", function(event) {
         if (event.which === 27) {  // Esc
            }
      })
*/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X