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

355

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"?

Praveen Prasad
la source

Réponses:

517

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):

Sortie console pour $ ._

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.

Sampson
la source
59
Cela ne fonctionne que pour les éléments liés via les assistants jQuery.
Alex Ciminian
3
@jammypeach J'essaie votre solution mais je suis toujours indéfini pour le sélecteur. J'ai utilisé $ ('# elem'). Bind ('click', function () {}); si cela pouvait faire une différence.
Marcus
6
@marcus ahhh, woops j'ai raté quelque chose, désolé :)$._data(element[0], ‘events’);
totallyNotLizards
16
Ces jours-ci, il faut utiliser: $ ._ data ($ ('# foo') [0]) .events
Donald Taylor
5
$._data()est utilisé par JQuery interne. $.data()est la méthode publique à utiliser. Et $.data(element, 'events')fonctionne bien.
slideshowp2
73

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)
Vali Shah
la source
3
Je suis d'accord que c'est la méthode préférée et c'est une solution universelle, par rapport à s'appuyer sur jQuery, qui peut ou non être disponible.
deadbabykitten
3
@dead umm ... la question fait spécifiquement référence à jQuery et utilise jQuery dans l'exemple de pièce jointe - la réponse ne doit être valide que dans le contexte de jQuery (?)
Code Jockey
3
Il est également utile de comprendre les réponses dans d'autres contextes. Ce n'est pas parce que quelqu'un pose une question spécifique que la réponse contrainte qu'il recevra sera la meilleure disponible. Surtout avec jQuery, les gens ont tendance à s'en servir comme d'une béquille. Il est important de comprendre l'architecture sous-jacente. Cette réponse montre que jQuery n'est même pas nécessairement requis. La question et l'exemple sont trop vagues pour en connaître l'usage et, par conséquent, laissent ouverte à l'interprétation ce qui pourrait être considéré comme une réponse valable.
deadbabykitten
12

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

entrez la description de l'image ici

kakoma
la source
1
Ceci est également disponible dans les outils de développement IE.
devlin carnate
9

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);
ScottyG
la source
4
Je pense que ce n'est pas une fonction native et a besoin du script / dépendance suivant: github.com/colxi/getEventListeners Cela devrait être ajouté à la réponse, car c'est trompeur sinon. Mais merci de m'avoir amené à ce 'plugin'; à l'air cool. :)
Dennis98
6

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.

JohnK
la source
3

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

FF Quantum Dev Tools

Chris22
la source
1
réponse impressionnante, en particulier la capture d'écran le rend beaucoup plus facile. Merci pour l'effort!
bizi
2

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.

Adrian Liew
la source
2

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 :

entrez la description de l'image ici

Et puis regardez le gestionnaire > [[FunctionLocation]]

entrez la description de l'image ici

Pikamander2
la source
0

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/

giri-jeedigunta
la source
3
La raison en est que vous déléguez l'événement à partir de $('#outerWrap'). Les événements sont en fait liés à cet élément plutôt qu'aux ancres individuelles.
Scottux