web-dev-qa-db-fra.com

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

Tout en travaillant avec les événements de navigateur, j'ai commencé à intégrer les événements TouchEvents de Safari pour les appareils mobiles. Je trouve que addEventListeners se cumulent avec des conditions. Ce projet ne peut pas utiliser JQuery.

Un auditeur d'événement 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);

La variable bind de JQuery autorise plusieurs événements, comme suit:

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

Est-il possible de combiner les deux écouteurs d'événement comme dans l'exemple de JQuery? ex:

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

Toutes les suggestions ou conseils sont appréciés!

javascriptjquerytouchaddeventlistener
110
johnkreitlow

Dans POJS, vous ajoutez un auditeur à la fois. Il n'est pas courant d'ajouter le même écouteur pour deux événements différents sur le même élément. Vous pouvez écrire votre propre petite fonction pour faire le travail, par exemple:

/* Add one or more listeners to an element
** @param {DOMElement} element - DOM element to add listeners to
** @param {string} eventNames - space separated list of event names, e.g. 'click change'
** @param {Function} listener - function to attach for each event as a listener
*/
function addListenerMulti(element, eventNames, listener) {
  var events = eventNames.split(' ');
  for (var i=0, iLen=events.length; i<iLen; i++) {
    element.addEventListener(events[i], listener, false);
  }
}

addListenerMulti(window, 'mousemove touchmove', function(){…});

Espérons que cela montre le concept. 

Edit 2016-02-25

Le commentaire de Dalgard m'a amené à revenir sur cette question. J'imagine que l'ajout du même écouteur pour plusieurs événements sur le même élément est maintenant plus courant pour couvrir les différents types d'interface utilisés, et la réponse d'Isaac offre une bonne utilisation des méthodes intégrées pour réduire le code (bien que moins de code soit en soi , pas nécessairement un bonus). Les fonctions de flèche étendues avec ECMAScript 2015 donnent:

function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}

Une stratégie similaire pourrait ajouter le même écouteur à plusieurs éléments, mais la nécessité de le faire pourrait être un indicateur de la délégation d'événements.

83
RobG

Une syntaxe compacte qui permet d’obtenir le résultat souhaité, POJS:

   "mousemove touchmove".split(" ").forEach(function(e){
      window.addEventListener(e,mouseMoveHandler,false);
    });
95
Isaac

Nettoyer la réponse d'Isaac:

['mousemove', 'touchmove'].forEach(function(e) {
  window.addEventListener(e, mouseMoveHandler);
});
39
pmrotule

ES2015:

let el = document.getElementById("el");
let handler =()=> console.log("changed");
['change', 'keyup', 'cut'].forEach(event => el.addEventListener(event, handler));
9
ChrisTheButcher

Pour moi; ce code fonctionne bien et est le code le plus court pour gérer plusieurs événements avec les mêmes fonctions (en ligne).

var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."];
for(event of eventList) {
    element.addEventListener(event, function() {
        // your function body...
        console.log("you inserted things by paste or typing etc.");
    });
}
8
user3796876

J'ai une solution plus simple pour vous:

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

J'ai testé cela et cela fonctionne très bien, du côté des avantages, il est compact et simple comme les autres exemples ici.

2
user4891016

AddEventListener prend une chaîne simple qui représente event.type . Vous devez donc écrire une fonction personnalisée pour parcourir plusieurs événements.

Ceci est géré dans jQuery en utilisant .split ("") puis en parcourant 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
1
Selvakumar Arumugam

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>
0
Reza Saadati