web-dev-qa-db-fra.com

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');}

Est-il possible d'obtenir une liste de tous les événements liés à un élément, dans ce cas sur un élément avec id="Elm"?

javascriptjqueryjavascript-events
347
Praveen Prasad

Dans les versions modernes de jQuery, vous utiliseriez la méthode $._data pour rechercher tous les événements attachés 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 contenant les deux événements que nous avons définis (illustré ci-dessous avec la propriété mouseout développée):

Console output for $._

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

500
Sampson

Cas général:

  • Frappé F12 ouvrir les outils de développement
  • Cliquez sur l'onglet Sources
  • A droite, faites défiler jusqu'à Event Listener Breakpoints et 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 le élément cible -> sélectionnez "Inspect element"
  • Faites défiler l'écran vers le bas à droite du cadre de développement, en bas, vous trouverez 'event listeners'.
  • Développez l'arborescence pour voir quels événements sont attachés à l'élément. Je ne suis pas sûr que cela fonctionne pour les événements gérés par le bullage (je suppose que non)
68
Vali Shah

J'ajoute ceci pour la postérité; Il existe un moyen plus simple d’impliquer plus de JS. En utilisant le addon incroyable de 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 des é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

enter image description here

11
kakoma

Vous pouvez maintenant obtenir simplement une 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 des outils de développement:

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

Le plugin plug-in jQuery Audit devrait vous permettre de le faire via les outils de développement Chrome. Ce n'est pas parfait, mais cela devrait vous permettre de voir le gestionnaire réel lié à l'élément/événement et pas seulement le gestionnaire générique jQuery.

6
JohnK

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

  1. Clic 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

2
Chris22

Notez que des é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 :

enter image description here

Et ensuite, regardez le gestionnaire > [[FunctionLocation]]

enter image description here

2
Pikamander2

J'ai utilisé quelque chose comme ceci si ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... fait quelque chose, lie à peu près leurs gestionnaires d'événements} pour vérifier si mon élément est lié à un événement. Il sera toujours dit non défini (null) si vous avez détaché tous vos gestionnaires d’événements de cet élément. C'est la raison pour laquelle j'évalue cela dans une expression if.

2
Adrian Liew

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

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

0
giri-jeedigunta