Comment vérifier si l'auditeur d'événements attaché dynamiquement existe ou non ?

Question

Voici mon problème : est-il possible de vérifier l'existence d'un récepteur d'événement attaché dynamiquement ? Ou comment puis-je vérifier l'état de la propriété "onclick" ( ?) dans le DOM ? J'ai cherché une solution sur Internet, comme sur Stack Overflow, mais sans succès. Voici mon code html :

<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->

Ensuite, en Javascript, j'attache un récepteur d'événements créé dynamiquement au deuxième lien :

document.getElementById('link2').addEventListener('click', linkclick, false);

Le code s'exécute correctement, mais toutes mes tentatives de détection de l'auditeur attaché échouent :

// test for #link2 - dynamically created eventlistener
alert(elem.onclick); // null
alert(elem.hasAttribute('onclick')); // false
alert(elem.click); // function click(){[native code]} // btw, what's this?

jsFiddle est ici . Si vous cliquez sur "Add onclick for 2" puis sur "[link 2]", l'événement se déclenche bien, mais l'événement "Test link 2" est toujours faux. Quelqu'un peut-il m'aider ?

Answer 1

Il semble étrange que cette méthode n'existe pas. Est-il temps de l'ajouter enfin ?

Si vous le vouliez, vous pourriez faire quelque chose comme ce qui suit :

var _addEventListener = EventTarget.prototype.addEventListener;
var _removeEventListener = EventTarget.prototype.removeEventListener;
EventTarget.prototype.events = {};
EventTarget.prototype.addEventListener = function(name, listener, etc) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    events[name] = [];
  }

  if (events[name].indexOf(listener) == -1) {
    events[name].push(listener);
  }

  _addEventListener(name, listener);
};
EventTarget.prototype.removeEventListener = function(name, listener) {
  var events = EventTarget.prototype.events;

  if (events[name] != null && events[name].indexOf(listener) != -1) {
    events[name].splice(events[name].indexOf(listener), 1);
  }

  _removeEventListener(name, listener);
};
EventTarget.prototype.hasEventListener = function(name) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    return false;
  }

  return events[name].length;
};

Answer 2

Vous pouvez toujours vérifier manuellement si votre EventListener existe en utilisant l'inspecteur de Chrome par exemple. Dans l'onglet Élément, vous avez le traditionnel sous-onglet "Styles" et, à côté, un autre sous-onglet : "Écouteurs d'événements". Ce dernier vous donnera la liste de tous les EventListeners avec leurs éléments liés.

Answer 3

Il ne semble pas y avoir de fonction inter-navigateurs permettant de rechercher les événements enregistrés sous un élément donné.

Toutefois, il est possible de visualiser les fonctions de rappel des éléments dans certains navigateurs à l'aide de leurs outils de développement. Cela peut s'avérer utile pour déterminer le fonctionnement d'une page web ou pour déboguer un code.

Firefox

Tout d'abord, visualisez l'élément dans la fenêtre Inspecteur dans les outils de développement. Cette opération peut être effectuée :

• Sur la page en cliquant avec le bouton droit de la souris sur l'élément de la page web que vous souhaitez inspecter et en sélectionnant "Inspecter l'élément" dans le menu.
• Dans la console en utilisant une fonction pour sélectionner l'élément, telle que document.querySelector puis en cliquant sur l'icône à côté de l'élément pour l'afficher dans la fenêtre d'accueil. Inspecteur tabulation.

Si des événements ont été enregistrés pour l'élément, vous verrez un bouton contenant le mot Événement à côté de l'élément. En cliquant dessus, vous pourrez voir les événements qui ont été enregistrés avec l'élément. En cliquant sur la flèche située à côté d'un événement, vous pouvez afficher la fonction de rappel correspondante.

Chrome

Tout d'abord, visualisez l'élément dans la fenêtre Éléments dans les outils de développement. Cette opération peut être effectuée :

• Sur la page en cliquant avec le bouton droit de la souris sur l'élément de la page web que vous souhaitez inspecter et en sélectionnant "Inspecter" dans le menu.
• Dans la console en utilisant une fonction pour sélectionner l'élément, telle que document.querySelector cliquer avec le bouton droit de la souris sur l'élément et sélectionner "Révéler dans le panneau Éléments" pour l'afficher dans la fenêtre d'accueil. Inspecteur tabulation.

Près de la section de la fenêtre qui montre l'arbre contenant les éléments de la page web, il devrait y avoir une autre section avec un onglet intitulé "Event Listeners". Sélectionnez-le pour voir les événements qui ont été enregistrés pour l'élément. Pour voir le code d'un événement donné, cliquez sur le lien situé à sa droite.

Dans Chrome, les événements d'un élément peuvent également être trouvés à l'aide de la fonction getEventListeners fonction. Cependant, d'après mes tests, la fonction getEventListeners ne répertorie pas les événements lorsque plusieurs éléments lui sont transmis. Si vous voulez trouver tous les éléments de la page qui ont des écouteurs et voir les fonctions de rappel pour ces écouteurs, vous pouvez utiliser le code suivant dans la console pour le faire :

var elems = document.querySelectorAll('*');

for (var i=0; i <= elems.length; i++) {
    var listeners = getEventListeners(elems[i]);

    if (Object.keys(listeners).length < 1) {
        continue;
    }

    console.log(elems[i]);

    for (var j in listeners) {
        console.log('Event: '+j);

        for (var k=0; k < listeners[j].length; k++) {
            console.log(listeners[j][k].listener);
        }
    }
}

---

Veuillez modifier cette réponse si vous connaissez des moyens de le faire dans les navigateurs donnés ou dans d'autres navigateurs.

Answer 4

Mise à jour 2022 :

J'ai écrit des méthodes utilitaires en TypeScript pour attacher et détacher des événements en fonction des critères suivants cette réponse mais corrigée. J'espère qu'il sera utile à quelqu'un.

export const attachEvent = (
  element: Element,
  eventName: string,
  callback: () => void
) => {
  if (element && eventName && element.getAttribute('listener') !== 'true') {
    element.setAttribute('listener', 'true');
    element.addEventListener(eventName, () => {
      callback();
    });
  }
};

export const detachEvent = (
  element: Element,
  eventName: string,
  callback: () => void
) => {
  if (eventName && element) {
    element.removeEventListener(eventName, callback);
  }
};

Importez-le et utilisez-le n'importe où comme ceci

  attachEvent(domElement, 'click', this.myfunction.bind(this));
  detachEvent(domElement, 'click', this.myfunction);

Answer 5

Voici un script que j'ai utilisé pour vérifier l'existence d'un écouteur d'événement attaché dynamiquement. J'ai utilisé jQuery pour attacher un gestionnaire d'événement à un élément, puis déclencher cet événement (dans ce cas, l'événement "click"). De cette manière, je peux récupérer et capturer les propriétés de l'événement qui n'existeront que si le gestionnaire d'événement est attaché.

var eventHandlerType;

$('#contentDiv').on('click', clickEventHandler).triggerHandler('click');

function clickEventHandler(e) {
    eventHandlerType = e.type;
}

if (eventHandlerType === 'click') {
    console.log('EventHandler "click" has been applied');
}