Comment puis-je voir l'événement qui est attaché à un élément html?

Question

Bonjour, je suis un nouveau programmeur et j'apprends toujours. C'est le code que j'essaie de comprendre:

 <div id="buy" class="buy button">Buy</div>
 

Lorsque je clique sur le div (bouton), du code javascript est exécuté mais je ne sais pas où il se trouve. Comment savoir quelle fonction est déclenchée lorsqu'un clic se produit? Certains comment un auditeur est attaché à cet élément

Answer 1

Dans les outils de développement de Google chrome (cliquez sur l'icône représentant une clé> Outils> Outils de développement), sélectionnez l'élément dans l'onglet Eléments, puis à droite, dans le panneau "Auditeurs d'événement", vous verrez tous les événements.

Answer 2

Si vous utilisez Firefox et Firebug, vous pouvez essayer d’installer FireQuery. Cela vous permettra de voir les gestionnaires liés par jQuery. http://firequery.binaryage.com/

Answer 3

Vous ne pouvez pas le faire dans une très bonne manière "juste" à l'aide de ECMAscript lui-même. Par exemple, si il y a un gestionnaire d'événements click ajouté par DOM Niveau 1 dans la forme de

document.getElementById('buy').onclick = function() {};

bien sûr, vous pouvez facilement intercepter cette propriété sur le nœud lui-même. Les choses se compliquent si DOM Niveau 2 entre en jeu à la .addEventListener() respectevily .attachEvent(). Maintenant, vous n'avez pas vraiment d'un "lieu" à chercher où toutes les différentes fonctions d'écouteur tenu de.

Il est de mieux en mieux en utilisant jQuery. jQuery tiendra toutes ses fonctions de gestionnaire d'événements dans un objet spécial qui est lié à l'arbre DOM de l'invocation. Vous pouvez vérifier que par l'obtention de l' .data()-expando propriété pour un nœud comme

$('#buy').data('events');

Cependant, maintenant que je l'ai déjà décrit trois façons différentes de liaison des écouteurs d'événement à un nœud (en fait deux, car une librairie comme jQuery utilise également des DOM Niveau 1 ou 2 méthodes de cours).

Il est vraiment laid, si un événement est triggerd par délégation. Cela signifie que, nous avons lié notre événement click sur certains parent-nœud juste en attente pour cet événement se prépare à nous afin que nous puissions vérifier l' target. Alors maintenant, nous n'avons même pas une relation directe entre l' node et de la event listener.

La Conclusion ici est, à l'affût d'un plugin de navigateur ou probablement une chose comme VisualEvent.

Answer 4

Vous pouvez utiliser le script " Visual Event 2 " comme marque-page ou le même script que l' extension Chrome .

Ce script affiche tous les événements js liés aux éléments dom.

Answer 5

Utilisez jQuery("#buy").data('events');

http://api.jquery.com/jQuery.data/ peut être intéressant.