JavaScript - comment vérifier si l'événement a déjà été ajouté

Question

Je veux ajouter un écouteur une seule fois pour beforeunload. Voici mon pseudocode:

if(window.hasEventListener('beforeunload') === false) {
     window.addEventListener('beforeunload', function() { ... }, false);
}

Mais hasEventListener n'existe pas évidemment. Comment puis-je atteindre cet objectif? Merci.

Answer 1

En utilisant jquery vous pouvez utiliser data("events") sur n'importe quel objet (ici la fenêtre):

var hasbeforeunload = $(window).data("events") && $(window).data("events").['beforeunload'];

Mais cela ne fonctionne que pour les événements ajoutés par jquery.

Dans un cas plus général, vous devez simplement stocker les informations que vous ajoutez un écouteur quelque part:

   var addedListeners = {};
   function addWindowListenerIfNone(eventType, fun) {
      if (addedListeners[eventType]) return;
      addedListeners[eventType] = fun;
      window.addEventListener(eventType, fun);
   }

Je pense qu'il n'y a pas de moyen standard en javascript pour obtenir les gestionnaires d'événements existants. Au mieux, vous pouvez augmenter la fonction addEventListener de Node pour intercepter et stocker les écouteurs mais je ne le recommande pas ...

MODIFIER:

Depuis jQuery 1.8, les données d'événement sont disponibles dans $._data(element, "events"). Le journal des modifications contient un avertissement qui doit être pris en compte:

Notez que ce n'est pas une interface publique prise en charge; les structures de données réelles peuvent changer de manière incompétitive d'une version à l'autre.

Answer 2

En fait, il n'est pas nécessaire de vérifier si un écouteur a été ajouté à une cible:

Si plusieurs EventListeners identiques sont enregistrés sur le même EventTarget avec les mêmes paramètres, les instances en double sont ignorées. Ils n'entraînent pas l'appel d'EventListener deux fois, et comme les doublons sont supprimés, ils n'ont pas besoin d'être supprimés manuellement avec la méthode removeEventListener.

Source: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Multiple_identical_event_listeners

Answer 3

Dans Chrome Dev tool, vous pouvez vérifier tous les événements attachés à un élément (pour le débogage) -

// print all events attached to document
var eventObjectAttachedToDocument = getEventListeners(document);

for (var event in eventObjectAttachedToDocument) {
    console.log(event);
}