Lier plusieurs événements à un écouteur (sans JQuery) ?

Question

En travaillant avec les événements du navigateur, j'ai commencé à incorporer les touchEvents de Safari pour les appareils mobiles. Je trouve que addEventListener s'empilent avec les conditionnels. Ce projet ne peut pas utiliser JQuery.

Un écouteur d'événements standard :

/* option 1 */
window.addEventListener('mousemove', this.mouseMoveHandler, false);
window.addEventListener('touchmove', this.mouseMoveHandler, false);

/* option 2, only enables the required event */
var isTouchEnabled = window.Touch || false;
window.addEventListener(isTouchEnabled ? 'touchmove' : 'mousemove', this.mouseMoveHandler, false);

L'approche de JQuery bind permet des événements multiples, comme ceci :

$(window).bind('mousemove touchmove', function(e) {
    //do something;
});

Existe-t-il un moyen de combiner les deux écouteurs d'événements comme dans l'exemple de JQuery ? ex :

window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);

Toute suggestion ou conseil est le bienvenu !

Answer 1

J'ai une solution plus simple pour vous :

window.onload = window.onresize = (event) => {
    //Your Code Here
}

Je l'ai testé et ça marche très bien, en plus c'est compact et pas compliqué comme les autres exemples ici.

Answer 2

Une façon de le faire :

const troll = document.getElementById('troll');

['mousedown', 'mouseup'].forEach(type => {
    if (type === 'mousedown') {
        troll.addEventListener(type, () => console.log('Mouse is down'));
    }
        else if (type === 'mouseup') {
                troll.addEventListener(type, () => console.log('Mouse is up'));
        }
});

img {
  width: 100px;
  cursor: pointer;
}

<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>

Answer 3

AddEventListener prenez une simple chaîne qui représente type d'événement . Vous devez donc écrire une fonction personnalisée pour itérer sur plusieurs événements.

Ceci est géré dans jQuery en utilisant .split(" ") et en itérant ensuite sur la liste pour définir les eventListeners pour chaque types .

    // Add elem as a property of the handle function
    // This is to prevent a memory leak with non-native events in IE.
    eventHandle.elem = elem;

    // Handle multiple events separated by a space
    // jQuery(...).bind("mouseover mouseout", fn);
    types = types.split(" ");  

    var type, i = 0, namespaces;

    while ( (type = types[ i++ ]) ) {  <-- iterates thru 1 by 1

Answer 4

Vous pouvez également utiliser des prototypes pour lier votre fonction personnalisée à tous les éléments.

Node.prototype.addEventListeners = function(eventNames, eventFunction){
    for (eventName of eventNames.split(' '))
        this.addEventListener(eventName, eventFunction);
}

Alors utilisez-le

document.body.addEventListeners("mousedown touchdown", myFunction)