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

var listenerPaste = pasteAreaElm.hasOwnProperty('listenerPaste');
if (!listenerPaste) {
    pasteAreaElm.addEventListener("paste", onPasteEvent, false);
    pasteAreaElm.listenerPaste = true;
}

Answer 2

Il est possible de dresser la liste de tous les auditeurs d'événements en JavaScript. Il suffit de pirater la méthode du prototype des éléments HTML (avant d'ajouter les listeners).

Cette solution ne fonctionnera que sur Google Chrome ou les navigateurs basés sur Chromium.

1. Cliquez avec le bouton droit de la souris sur l'élément et choisissez "inspecter" pour ouvrir les outils de développement de Chrome.
2. Une fois les outils de développement ouverts, passez à l'onglet "Event Listeners" et vous verrez tous les event listeners liés à l'élément.

Answer 3

Je viens d'écrire un script qui vous permet de réaliser cela. Il vous donne deux fonctions globales : hasEvent(Node elm, String event) y getEvents(Node elm) que vous pouvez utiliser. Sachez qu'il modifie la EventTarget méthode du prototype add/RemoveEventListener et ne fonctionne pas pour les événements ajoutés par le biais du balisage HTML ou de la syntaxe javascript de elm.on_event = ...

Plus d'informations sur GitHub

Démonstration en direct

script :

var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}();

Answer 4

J'attache généralement une classe à l'élément, puis je vérifie si la classe existe, comme ceci :

let element = document.getElementsById("someElement");

if(!element.classList.contains('attached-listener'))
   element.addEventListener("click", this.itemClicked);

element.classList.add('attached-listener');

Answer 5

Ce genre de choses devrait être utile pour le document :

var listeners = window.getEventListeners(document);
Object.keys(listeners).forEach(event => {
    console.log(event, listeners[event]);
});

Ou en utilisant des sélecteurs :

getAllEventListeners = function(el) {
 var allListeners = {}, listeners;

 while(el) {
  listeners = getEventListeners(el);

  for(event in listeners) {
   allListeners[event] = allListeners[event] || [];
   allListeners[event].push({listener: listeners[event], element: el});  
  }

  el = el.parentNode;
 }

 return allListeners;
}