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

Question

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!

Answer 1

document.getElementById('first').addEventListener('touchstart',myFunction);

document.getElementById('first').addEventListener('click',myFunction);

function myFunction(e){
  e.preventDefault();e.stopPropagation()
  do_something();
}    

Vous devriez utiliser e.stopPropagation() car sinon, votre fonction sera appelée deux fois sur mobile

Answer 2

Ceci est ma solution dans laquelle je traite de plusieurs événements dans mon flux de travail.

let h2 = document.querySelector("h2");

function addMultipleEvents(eventsArray, targetElem, handler) {
        eventsArray.map(function(event) {
            targetElem.addEventListener(event, handler, false);
        }
    );
}
let counter = 0;
function countP() {
    counter++;
    h2.innerHTML = counter;
}

// la magie commence ici...
addMultipleEvents(['click', 'mouseleave', 'mouseenter'], h2, countP);

DÉMO D'ÉVÉNEMENTS MULTIPLES - Si vous cliquez, vous vous éloignez ou entrez la souris sur le nombre, cela compte...

0

Answer 3

Vous pouvez simplement le faire en itérant sur un Object. Cela peut fonctionner avec un seul ou plusieurs éléments. Voici un exemple:

const ELEMENTS = {'click': element1, ...};
for (const [key, value] of Object.entries(ELEMENTS)) {
    value.addEventListener(key, () => {
        do_something();
    });
}

Quand clé est le type d'événement et valeur est l'élément sur lequel vous ajoutez l'événement, vous pouvez donc éditer ELEMENTS en ajoutant vos éléments et le type d'événement.

Answer 4

Un peu hors sujet, mais ceci est pour initialiser un écouteur d'événements unique spécifique par élément.

Vous pouvez utiliser le curseur pour afficher les valeurs en temps réel, ou vérifier la console. Sur l'élément j'ai un balise attr appelée data-whatever, vous pouvez personnaliser ces données si vous le souhaitez.

sliders = document.querySelectorAll("input");
sliders.forEach(item=> {
  item.addEventListener('input', (e) => {
    console.log(`${item.getAttribute("data-whatever")} est cette valeur: ${e.target.value}`);
    item.nextElementSibling.textContent = e.target.value;
  });
})

.wrapper {
  display: flex;
}
span {
  padding-right: 30px;
  margin-left: 5px;
}
* {
  font-size: 12px
}

  50
  Taille

  50
  OrigineY

  50
  OrigineX

Answer 5

//attraper la mise à jour du volume
var volEvents = "changement,entrée";
var volEventsArr = volEvents.split(",");
for(var i = 0;i