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

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 à l'élément avec id="elm"?

Dans les versions modernes de jQuery, vous utiliseriez la $._dataméthode pour trouver tous les événements attachés par jQuery à l'élément en question. Remarque , 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 $._datasera un objet qui contient les deux événements que nous avons définis (illustré ci-dessous avec la mouseoutpropriété développée):

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

Cas général:

• Appuyez F12pour ouvrir Dev Tools
• Cliquez sur l' Sourcesonglet
• Sur le côté droit, faites défiler vers le bas Event Listener Breakpointset développez l'arborescence
• Cliquez sur les événements que vous souhaitez écouter.
• Interagissez avec l'élément cible, s'il se déclenche, vous obtiendrez un point d'arrêt dans le débogueur

De même, vous pouvez:

• clic droit sur l' élément cible -> sélectionner " Inspect element"
• Faites défiler vers le bas sur le côté droit du cadre de développement, en bas se trouve ' event listeners'.
• Développez l'arborescence 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 via le bullage (je suppose que non)

J'ajoute cela pour la postérité; Il existe un moyen plus simple qui n'implique pas d'écrire plus de JS. En utilisant l' incroyable 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 de la barre latérale (illustrés dans la capture d'écran), accédez à l'onglet événements à l'aide de la petite flèche>
3. L'onglet événements affiche les événements et les fonctions correspondantes pour chaque événement
4. Le texte à côté montre l'emplacement de la fonction

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

Par exemple, tapez ce qui suit dans la console des outils de développement:

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

Le plugin jQuery Audit devrait vous permettre de le faire via les outils de développement Chrome standard. Ce 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 jQuery.

Bien que cela ne soit pas spécifiquement spécifique aux sélecteurs / objets jQuery, dans FireFox Quantum 58.x, vous pouvez trouver des gestionnaires d'événements sur un élément à l'aide des outils de développement:

1. Cliquez avec le bouton droit sur l'élément
2. Dans le menu contextuel, cliquez sur «Inspecter l'élément»
3. S'il y a une icône 'ev' à côté de l'élément (boîte jaune), cliquez sur l'icône 'ev'
4. Affiche tous les événements pour cet élément et ce gestionnaire d'événements

J'ai utilisé quelque chose comme ça if ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... faire quelque chose, lier à nouveau leurs gestionnaires d'événements} pour vérifier si mon élément est lié à un événement. Il dira toujours undefined (null) si vous avez détaché tous vos gestionnaires d'événements de cet élément. C'est la raison pour laquelle j'évalue ceci dans une expression if.

Notez que les événements peuvent être attachés au document lui-même plutôt qu'à l'élément en question. Dans ce cas, vous voudrez utiliser:

$._data( $(document)[0], "events" );

Et trouvez l'événement avec le bon sélecteur :

Et puis regardez le gestionnaire > [[FunctionLocation]]

Lorsque je passe une petite requête DOM complexe à des données $ ._ comme celle- $._data($('#outerWrap .innerWrap ul li:last a'), 'events')ci : cela lance undefined dans la console du navigateur.

J'ai donc dû utiliser des données $ ._ sur la div parent: $._data($('#outerWrap')[0], 'events')pour voir les événements des balises a. Voici un JSFiddle pour le même: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/