Puis-je trouver les événements liés à un élément avec jQuery ?

Question

Je lie deux gestionnaires d'événements sur ce lien :

<a href='#' id='elm'>Show Alert</a>

JavaScript :

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

Existe-t-il un moyen d'obtenir une liste de tous les événements liés à un élément, dans ce cas un élément avec id="elm" ?

Answer 1

Dans les versions modernes de jQuery, vous utiliserez la fonction $._data pour trouver tout événement attaché par jQuery à l'élément en question. Note il s'agit d'une méthode à usage interne uniquement :

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

Le résultat de $._data sera un objet qui contient les deux événements que nous avons définis (illustré ci-dessous avec l'icône mouseout propriété élargie) :

Ensuite, dans Chrome, vous pouvez cliquer avec le bouton droit de la souris sur la fonction de gestion et cliquer sur "Afficher la définition de la fonction" pour afficher l'endroit exact où elle est définie dans votre code.

Answer 2

Cas général :

• Hit F12 pour ouvrir Dev Tools
• Cliquez sur le bouton Sources tab
• Sur le côté droit, faites défiler vers le bas jusqu'à Event Listener Breakpoints et développer l'arbre
• Cliquez sur les événements que vous voulez écouter.
• Interagissez avec l'élément cible, s'ils tirent, vous obtiendrez un point d'arrêt dans le débogueur.

De même, vous pouvez :

• cliquez avec le bouton droit de la souris sur le élément cible -> sélectionnez " Inspect element "
• Faites défiler vers le bas sur le côté droit du cadre de développement, en bas il y a ' event listeners '.
• Développez l'arbre pour voir quels événements sont attachés à l'élément. Je ne sais pas si cela fonctionne pour les événements qui sont gérés par des bulles (je suppose que non).

Answer 3

J'ajoute ceci pour la postérité ; il existe un moyen plus simple qui n'implique pas d'écrire plus de JS. En utilisant le l'étonnant addon firebug pour firefox ,

1. Faites un clic droit sur l'élément et sélectionnez "Inspecter l'élément avec Firebug".
2. Dans les panneaux latéraux (montrés dans la capture d'écran), naviguez vers l'onglet des événements en utilisant la petite flèche >.
3. L'onglet événements montre les événements et les fonctions correspondantes pour chaque événement
4. Le texte à côté indique l'emplacement de la fonction

Answer 4

Vous pouvez maintenant obtenir simplement la liste des écouteurs d'événements liés à un objet en utilisant la fonction javascript getEventListeners().

Par exemple, tapez ce qui suit dans la console dev tools :

// Get all event listners bound to the document object
getEventListeners(document);

Answer 5

En plugin jQuery Audit devrait vous permettre de le faire par le biais des outils de développement normaux de Chrome. Il n'est pas parfait, mais il devrait vous permettre de voir le gestionnaire réel lié à l'élément/événement et pas seulement le gestionnaire générique de jQuery.