Comment trouver des écouteurs d'événements sur un nœud DOM lors du débogage ou à partir du code JavaScript?

842

J'ai une page où certains écouteurs d'événements sont attachés aux zones de saisie et aux zones de sélection. Existe-t-il un moyen de savoir quels écouteurs d'événements observent un nœud DOM particulier et pour quel événement?

Les événements sont attachés en utilisant:

  1. Prototype Event.observe ;
  2. DOM addEventListener;
  3. Comme attribut d'élément element.onclick.
Navneet
la source
3
Comment les événements sont-ils attachés en premier lieu? Utilisez-vous une bibliothèque (par exemple Prototype, jQuery, etc.)?
Crescent Fresh, le
Il est important de noter que plusieurs fonctions de rappel peuvent être attachées pour le même type d'événement via element.addEventListener(type, callback, [bubble]), tandis element.onclick = functionqu'elles seront écrasées chaque fois que vous les affecterez.
Braden Best

Réponses:

507

Si vous avez juste besoin d'inspecter ce qui se passe sur une page, vous pouvez essayer le bookmarklet Visual Event .

Mise à jour : Visual Event 2 disponible.

Andrew Hedges
la source
1
Parfait! Le EventBugplugin Beats Firebug .
Robin Maben
22
Cela ajoute un million d'éléments à la page, dont beaucoup sont des images. Son utilité est considérablement réduite sur une page avec de nombreux gestionnaires d'événements (le mien a 17k et Visual Event a pris environ 3 minutes à charger).
Tony R
15
Je crois que l'extension Chrome @ssharma mentionnée est celle disponible ici
kmote
1
Visial Event ne fonctionne pas si la page fait référence à une bibliothèque js tierce. Il génère une erreur: XMLHttpRequest ne peut pas charger A.com/js/jquery-ui-1.10.3.custom.js?_=1384831682813 . Origin B.com n'est pas autorisé par Access-Control-Allow-Origin.
hiway
5
Les outils de développement internes à Chrome et FF (F12) ont un visualiseur d'événements intégré! Chrome: sur l'onglet "Éléments", sélectionnez et élément et voyez à droite il y a: Style, Calculé, écouteurs d'événements
oriadam
365

Cela dépend de la façon dont les événements sont attachés. Pour l'illustration, supposons que nous avons le gestionnaire de clics suivant:

var handler = function() { alert('clicked!') };

Nous allons l'attacher à notre élément en utilisant différentes méthodes, certaines qui permettent l'inspection et d'autres qui ne le permettent pas.

Méthode A) gestionnaire d'événements unique

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

Méthode B) plusieurs gestionnaires d'événements

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

Méthode C): jQuery

$(element).click(handler);
  • 1.3.x

    // inspect
    var clickEvents = $(element).data("events").click;
    jQuery.each(clickEvents, function(key, value) {
        alert(value) // alerts "function() { alert('clicked!') }"
    })
    
  • 1.4.x (stocke le gestionnaire dans un objet)

    // inspect
    var clickEvents = $(element).data("events").click;
    jQuery.each(clickEvents, function(key, handlerObj) {
        alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
        // also available: handlerObj.type, handlerObj.namespace
    })
    

(Voir jQuery.fn.dataet jQuery.data)

Méthode D): Prototype (désordonné)

$(element).observe('click', handler);
  • 1.5.x

    // inspect
    Event.observers.each(function(item) {
        if(item[0] == element) {
            alert(item[2]) // alerts "function() { alert('clicked!') }"
        }
    })
    
  • 1.6 à 1.6.0.3, inclus (est devenu très difficile ici)

    // inspect. "_eventId" is for < 1.6.0.3 while 
    // "_prototypeEventID" was introduced in 1.6.0.3
    var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
    clickEvents.each(function(wrapper){
        alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
    })
  • 1.6.1 (peu mieux)

    // inspect
    var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
    clickEvents.each(function(wrapper){
        alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
    })
Croissant frais
la source
3
Merci pour la mise à jour. Il est regrettable que vous deviez parcourir chaque type de gestionnaire.
Keith Bentrup
4
Sur "Méthode B" (addEventListener), voici une réponse concernant le statut des installations d'énumération pour les gestionnaires enregistrés avec l'API DOM Events pure: stackoverflow.com/questions/7810534/…
Nickolay
@John: merci pour le commentaire. Vous avez un exemple de "vrai JavaScript" pour récupérer des écouteurs précédemment ajoutés via addEventListener?
Crescent Fresh
6
@Jan, cela ne semble pas fonctionner pour jQuery 1.7.2, existe-t-il une approche différente pour cette version?
tomdemuyt
14
@tomdemuyt Dans jQuery, les événements sont désormais stockés dans un tableau de données interne au lieu d'être accessibles via .data('events')comme auparavant. Pour accéder aux données d'événement internes, utilisez $._data(elem, 'events'). Notez que cette fonction est marquée "pour usage interne uniquement" dans la source jQuery, donc aucune promesse qu'elle fonctionnera toujours à l'avenir, mais je crois qu'elle fonctionne depuis jQuery 1.7 et fonctionne toujours.
Matt Browne
351

Prise getEventListeners(domElement)en charge de Chrome, Firefox, Vivaldi et Safari dans leur console Developer Tools.

Pour la majorité des objectifs de débogage, cela pourrait être utilisé.

Ci-dessous, une très bonne référence pour l'utiliser: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

Raghav
la source
1
+1. Le code spécifique au navigateur n'est pas un problème pour moi, car j'essaie de faire fonctionner correctement une page que je ne contrôle pas.
Grault
9
sympa, mais ne fonctionne que dans la ligne de commande de la console Chrome :(
gillyspy
5
@Raghav ah merci, l'utilisation n'est PAS: comme je l'ai d'abord pensé :)getEventListeners(object) obj getEventListeners()
jave.web
11
Vous auriez pu me sauver 3 heures si vous aviez expliqué comment obtenir le code source d'un écouteur d'événements. Cette "référence" n'explique rien. Dans le cas où quelqu'un d' autre était une perte est ici comment: var list = getEventListeners(document.getElementById("YOURIDHERE")); console.log(list["focus"][0]["listener"].toString()). Remplacez «focus» par l'événement que vous souhaitez inspecter et le nombre s'il y a plusieurs écouteurs sur le même événement.
doABarrelRoll721
46
CONSEIL: getEventListeners($0)obtiendra les écouteurs d'événements pour l'élément sur lequel vous vous êtes concentré dans les outils de développement Chrome. Je l'utilise tout le temps. J'adore ne pas avoir à utiliser les fonctions querySelector ou get__By_
cacoder
91

WebKit Inspector dans les navigateurs Chrome ou Safari le fait désormais. Il affichera les écouteurs d'événements pour un élément DOM lorsque vous le sélectionnez dans le volet Éléments.

Ishan
la source
9
Je ne suis pas sûr que cela montre tous les gestionnaires d'événements; juste le gestionnaire d'événements HTML unique.
huyz
3
Je devrais mentionner le plugin EventBug pour Firebug pour être complet < softwareishard.com/blog/category/eventbug >
Nickolay
Cela vient de faire ma journée, certains codes de prototype hérités avaient plusieurs fonctions liées au même événement sur le même élément et je mourais d'envie de les retrouver. Merci beaucoup Ishan.
siliconrockstar
70

Il est possible de lister tous les écouteurs d'événements en JavaScript: ce n'est pas si difficile; il vous suffit de pirater la prototypeméthode des éléments HTML ( avant d' ajouter les écouteurs).

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
    console.log(a)
}


HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;

HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    this.realAddEventListener(a,reportIn,c); 
    this.realAddEventListener(a,b,c); 
    if(!this.lastListenerInfo){  this.lastListenerInfo = new Array()};
    this.lastListenerInfo.push({a : a, b : b , c : c});
};

Désormais, chaque élément d'ancrage ( a) aura une lastListenerInfopropriété qui contient tous ses écouteurs. Et cela fonctionne même pour supprimer les écouteurs avec des fonctions anonymes.

Ivan Castellanos
la source
4
Cette méthode ne fonctionnera pas si vous écrivez un script utilisateur ou un script de contenu. Non seulement ces jours-ci sont susceptibles d'être mis en bac à sable, mais comment pouvez-vous garantir l'ordre d'exécution?
huyz
cette méthode fonctionne avec chrome / 19 et FF / 12. l'ordre d'exécution peut être garanti si vous accrochez ceci avant d'autres scripts
Tzury Bar Yochay
8
Ne pourriez-vous pas simplement modifier à la Node.prototypeplace? C'est de là que HTMLAnchorElementhérite .addEventListenerde toute façon.
Esailija
3
Vous supposez que l'agent utilisateur implémente l'héritage de prototype pour les objets hôtes DOM et vous permet de les modifier. Aucune de ces idées n'est bonne: ne modifiez pas les objets qui ne vous appartiennent pas .
RobG
1
C'est assez inutile - cela montre quels EventListeners ont été ajoutés, ce qui peut être bon dans certains cas, mais pas ce qui a été supprimé. Donc, si vous essayez de déboguer ce qui a été supprimé et ce qui ne l'a pas été, il n'y a tout simplement aucun moyen.
gotofritz
52

Utilisez getEventListeners dans Google Chrome :

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));
Pranay Soni
la source
1
Uncaught ReferenceError: getEventListeners n'est pas défini
Bryan Grace
3
getEventListeners ne fonctionne que dans la console devtools de Chrome. Et ceci est un double de cette réponse plus élaborée: stackoverflow.com/a/16544813/1026
Nickolay
41

(Réécriture de la réponse à cette question car elle est pertinente ici.)

Lors du débogage, si vous voulez juste voir les événements, je vous recommande soit ...

  1. Événement visuel
  2. La section Éléments des outils de développement de Chrome: sélectionnez un élément et recherchez "écouteurs d'événements" en bas à droite (similaire dans Firefox)

Si vous souhaitez utiliser les événements dans votre code et que vous utilisez jQuery avant la version 1.8 , vous pouvez utiliser:

$(selector).data("events")

pour obtenir les événements. Depuis la version 1.8, l'utilisation de .data ("événements") est arrêtée (voir ce ticket de bogue ). Vous pouvez utiliser:

$._data(element, "events")

Un autre exemple: Écrivez tous les événements de clic sur un certain lien vers la console:

var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);

(voir http://jsfiddle.net/HmsQC/ pour un exemple de travail)

Malheureusement, l' utilisation de données $ ._ n'est pas recommandée, sauf pour le débogage, car il s'agit d'une structure jQuery interne et pourrait changer dans les versions futures. Malheureusement, je ne connais aucun autre moyen facile d'accéder aux événements.

Luc
la source
1
$._data(elem, "events")ne semble pas fonctionner avec jQuery 1.10, du moins pour les événements enregistrés avec $(elem).on('event', ...). Quelqu'un sait-il comment les déboguer?
Marius Gedminas
4
Je ne suis pas positif, mais je pense que le premier paramètre de $._datadoit être un élément et non un objet jQuery. Je dois donc corriger mon exemple ci-dessus pour êtreconsole.log($._data($myLink[0], "events").click);
Luke
29

1: Prototype.observeutilise Element.addEventListener (voir le code source )

2: Vous pouvez remplacer Element.addEventListenerpour vous souvenir des écouteurs ajoutés (la propriété pratique a EventListenerListété supprimée de la proposition de spécification DOM3). Exécutez ce code avant de rattacher un événement:

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    this._addEventListener(a,b,c);
    if(!this.eventListenerList) this.eventListenerList = {};
    if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
    this.eventListenerList[a].push(b);
  };
})();

Lisez tous les événements par:

var clicks = someElement.eventListenerList.click;
if(clicks) clicks.forEach(function(f) {
  alert("I listen to this function: "+f.toString());
});

Et n'oubliez pas de remplacer Element.removeEventListenerpour supprimer l'événement de la coutume Element.eventListenerList.

3: la Element.onclickpropriété a besoin d'un soin particulier ici:

if(someElement.onclick)
  alert("I also listen tho this: "+someElement.onclick.toString());

4: n'oubliez pas l' Element.onclickattribut content: ce sont deux choses différentes:

someElement.onclick = someHandler; // IDL attribute
someElement.setAttribute("onclick","otherHandler(event)"); // content attribute

Vous devez donc aussi le gérer:

var click = someElement.getAttribute("onclick");
if(click) alert("I even listen to this: "+click);

Le bookmarklet Visual Event (mentionné dans la réponse la plus populaire) ne vole que le cache du gestionnaire de bibliothèque personnalisé:

Il s'avère qu'il n'y a pas de méthode standard fournie par l'interface DOM recommandée par le W3C pour savoir quels écouteurs d'événements sont attachés à un élément particulier. Bien que cela puisse sembler être une erreur, il a été proposé d'inclure une propriété appelée eventListenerList dans la spécification DOM de niveau 3, mais a malheureusement été supprimée dans les versions ultérieures. En tant que tel, nous sommes obligés de regarder les bibliothèques Javascript individuelles, qui maintiennent généralement un cache des événements attachés (afin qu'ils puissent plus tard être supprimés et effectuer d'autres abstractions utiles).

En tant que tel, pour que Visual Event affiche des événements, il doit être capable d'analyser les informations d'événement à partir d'une bibliothèque Javascript.

La substitution d'éléments peut être discutable (c'est-à-dire parce qu'il existe certaines fonctionnalités spécifiques au DOM comme les collections en direct, qui ne peuvent pas être codées dans JS), mais cela donne le support eventListenerList en natif et cela fonctionne dans Chrome, Firefox et Opera (ne fonctionne pas dans IE7 ).

Jan Turoň
la source
23

Vous pouvez encapsuler les méthodes natives DOM pour gérer les écouteurs d'événements en les plaçant en haut de votre <head>:

<script>
    (function(w){
        var originalAdd = w.addEventListener;
        w.addEventListener = function(){
            // add your own stuff here to debug
            return originalAdd.apply(this, arguments);
        };

        var originalRemove = w.removeEventListener;
        w.removeEventListener = function(){
            // add your own stuff here to debug
            return originalRemove.apply(this, arguments);
        };
    })(window);
</script>

H / T @ les2

Jon z
la source
Veuillez me corriger si je me trompe, mais n'est-ce pas uniquement pour les auditeurs d'événements attachés à la fenêtre?
Maciej Krawczyk
@MaciejKrawczyk yep, et ceux qui bouillonnent
Jon z
18

Les outils de développement de Firefox le font maintenant. Les événements sont affichés en cliquant sur le bouton "ev" à droite de l'affichage de chaque élément, y compris les événements jQuery et DOM .

Capture d'écran du bouton du programme d'écoute d'événements des outils de développement Firefox dans l'onglet Inspecteur

simonzack
la source
J'ai regardé l'un des éléments dom sur la page sur laquelle le bookmarklet Visual Event 2 montre un événement câblé, et j'ai vu le petit bouton "ev" à droite, comme vous le montrez.
Eric
L'écouteur d'événements de Firefox pourrait découvrir les événements délégués jQuery tandis que Chrome a besoin d'un plugin pour le faire.
Nick Tsai
12

Si vous avez Firebug , vous pouvez utiliser console.dir(object or array)pour imprimer une belle arborescence dans le journal de la console de tout scalaire, tableau ou objet JavaScript.

Essayer:

console.dir(clickEvents);

ou

console.dir(window);
Michael Butler
la source
9
Nouvelle fonctionnalité dans firebug 1.12 getfirebug.com/wiki/index.php/GetEventListeners
Javier Constanzo
10

Solution entièrement fonctionnelle basée sur la réponse de Jan Turon - se comporte comme à getEventListeners()partir de la console:

(Il y a un petit bug avec les doublons. Il ne casse pas grand-chose de toute façon.)

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._addEventListener(a,b,c);
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(!this.eventListenerList[a])
      this.eventListenerList[a] = [];
    //this.removeEventListener(a,b,c); // TODO - handle duplicates..
    this.eventListenerList[a].push({listener:b,useCapture:c});
  };

  Element.prototype.getEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined)
      return this.eventListenerList;
    return this.eventListenerList[a];
  };
  Element.prototype.clearEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined){
      for(var x in (this.getEventListeners())) this.clearEventListeners(x);
        return;
    }
    var el = this.getEventListeners(a);
    if(el==undefined)
      return;
    for(var i = el.length - 1; i >= 0; --i) {
      var ev = el[i];
      this.removeEventListener(a, ev.listener, ev.useCapture);
    }
  };

  Element.prototype._removeEventListener = Element.prototype.removeEventListener;
  Element.prototype.removeEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._removeEventListener(a,b,c);
      if(!this.eventListenerList)
        this.eventListenerList = {};
      if(!this.eventListenerList[a])
        this.eventListenerList[a] = [];

      // Find the event in the list
      for(var i=0;i<this.eventListenerList[a].length;i++){
          if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
              this.eventListenerList[a].splice(i, 1);
              break;
          }
      }
    if(this.eventListenerList[a].length==0)
      delete this.eventListenerList[a];
  };
})();

Usage:

someElement.getEventListeners([name]) - retourne la liste des écouteurs d'événement, si le nom est défini, retourne un tableau d'écouteurs pour cet événement

someElement.clearEventListeners([name]) - supprimer tous les écouteurs d'événements, si le nom est défini, supprimer uniquement les écouteurs de cet événement

n00b
la source
3
C'est une bonne réponse, mais je n'arrive pas à le faire fonctionner sur les éléments bodyet document.
David Bradshaw
Solution vraiment sympa!
Dzhakhar Ukhaev
@Peter Mortensen, pourquoi avez-vous changé le nom de Jan? :)
n00b
1
@David Bradshaw: parce que le corps, le document et la fenêtre ont leur propre prototype et non le prototype Element ...
Stefan Steiger
1
@ n00b: Il y a un bug. Voilà pourquoi hmmm. Vous utilisez l'opérateur virgule dans l'instruction if pour listener et useCaption ... L'opérateur virgule évalue chacun de ses opérandes (de gauche à droite) et renvoie la valeur du dernier opérande. Vous supprimez donc le premier eventListener qui correspond à useCapture, quel que soit le type de l'événement ... Cela devrait être && au lieu d'une virgule.
Stefan Steiger
8

Opera 12 (pas le dernier moteur Chrome Webkit) Dragonfly a cela depuis un certain temps et est évidemment affiché dans la structure DOM. À mon avis, c'est un débogueur supérieur et c'est la seule raison qui reste pour laquelle j'utilise toujours la version basée sur Opera 12 (il n'y a pas de version v13, v14 et la version v15 Webkit n'a toujours pas Dragonfly)

entrez la description de l'image ici

Daniel Sokolowski
la source
4

Prototype 1.7.1 façon

function get_element_registry(element) {
    var cache = Event.cache;
    if(element === window) return 0;
    if(typeof element._prototypeUID === 'undefined') {
        element._prototypeUID = Element.Storage.UID++;
    }
    var uid =  element._prototypeUID;           
    if(!cache[uid]) cache[uid] = {element: element};
    return cache[uid];
}
Ronald
la source
4

Je travaillais récemment avec des événements et je voulais voir / contrôler tous les événements dans une page. Après avoir examiné les solutions possibles, j'ai décidé de suivre ma propre voie et de créer un système personnalisé pour surveiller les événements. J'ai donc fait trois choses.

Tout d'abord, j'avais besoin d'un conteneur pour tous les écouteurs d'événements de la page: c'est l' EventListenersobjet. Il dispose de trois méthodes utiles: add(), remove()et get().

Ensuite, je créé un EventListenerobjet de tenir les informations nécessaires à l'événement, à savoir: target, type, callback, options, useCapture, wantsUntrusted, et a ajouté une méthode remove()pour supprimer l'auditeur.

Enfin, j'ai étendu le natif addEventListener()et les removeEventListener()méthodes pour les faire fonctionner avec les objets que j'ai créés ( EventListeneret EventListeners).

Usage:

var bodyClickEvent = document.body.addEventListener("click", function () {
    console.log("body click");
});

// bodyClickEvent.remove();

addEventListener()crée un EventListenerobjet, l'ajoute EventListenerset le renvoie EventListener, afin qu'il puisse être supprimé ultérieurement.

EventListeners.get()peut être utilisé pour afficher les écouteurs dans la page. Il accepte un EventTargetou une chaîne (type d'événement).

// EventListeners.get(document.body);
// EventListeners.get("click");

Démo

Disons que nous voulons connaître tous les écouteurs d'événements dans cette page actuelle. Nous pouvons le faire (en supposant que vous utilisez une extension de gestionnaire de scripts, Tampermonkey dans ce cas). Le script suivant fait ceci:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      https://stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
        .then(function (response) {
            return response.text();
        })
        .then(function (text) {
            eval(text);
            window.EventListeners = EventListeners;
        });
})(window);

Et quand nous listons tous les auditeurs, il est dit qu'il y a 299 auditeurs d'événements. Il semble qu'il y ait des doublons, mais je ne sais pas s'ils sont vraiment des doublons. Tous les types d'événements ne sont pas dupliqués, tous ces «doublons» peuvent donc être un écouteur individuel.

capture d'écran de la console répertoriant tous les écouteurs d'événements sur cette page

Le code peut être trouvé dans mon référentiel. Je ne voulais pas le poster ici car c'est assez long.


Mise à jour: cela ne semble pas fonctionner avec jQuery. Lorsque j'examine l'EventListener, je vois que le rappel est

function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}

Je crois que cela appartient à jQuery et n'est pas le rappel réel. jQuery stocke le rappel réel dans les propriétés de EventTarget:

$(document.body).click(function () {
    console.log("jquery click");
});

entrez la description de l'image ici

Pour supprimer un écouteur d'événements, le rappel réel doit être transmis à la removeEventListener()méthode. Donc, pour que cela fonctionne avec jQuery, il doit être modifié davantage. Je pourrais résoudre ce problème à l'avenir.

akinuri
la source
Fonctionne très bien! Merci
mt025
3

J'essaie de le faire dans jQuery 2.1, et avec la $().click() -> $(element).data("events").click;méthode " " cela ne fonctionne pas.

J'ai réalisé que seules les fonctions $ ._ data () fonctionnent dans mon cas:

	$(document).ready(function(){

		var node = $('body');
		
        // Bind 3 events to body click
		node.click(function(e) { alert('hello');  })
			.click(function(e) { alert('bye');  })
			.click(fun_1);

        // Inspect the events of body
		var events = $._data(node[0], "events").click;
		var ev1 = events[0].handler // -> function(e) { alert('hello')
		var ev2 = events[1].handler // -> function(e) { alert('bye')
		var ev3 = events[2].handler // -> function fun_1()
        
		$('body')
			.append('<p> Event1 = ' + eval(ev1).toString() + '</p>')
			.append('<p> Event2 = ' + eval(ev2).toString() + '</p>')
			.append('<p> Event3 = ' + eval(ev3).toString() + '</p>');        
	
	});

	function fun_1() {
		var txt = 'text del missatge';	 
		alert(txt);
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
</body>

Joel Barba
la source
1

la modification de ces fonctions vous permettra de connecter les écouteurs ajoutés:

EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent

lire le reste des auditeurs avec

console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));
Aiden Waterman
la source