web-dev-qa-db-fra.com

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

Bonjour, je suis un nouveau programmeur et j'apprends toujours. Voici 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 l'est. Comment savoir quelle fonction est déclenchée lorsqu'un clic se produit? Comment un auditeur est attaché à cet élément

javascriptjqueryjavascript-events
65
Vaso A.

Si vous utilisez Firefox et Firebug, vous pouvez essayer d'installer FireQuery. Il fera en sorte que vous puissiez voir les gestionnaires liés par jQuery. http://firequery.binaryage.com/

23
Aknosis

Dans les outils de développement de Google Chrome (cliquez sur l'icône de la clé> Outils> Outils de développement), sélectionnez l'élément dans l'onglet Éléments, à droite ouvrez le panneau 'Écouteurs d'événements' vous verrez tous les événements

104
yoelp

Vous pouvez utiliser le script " Visual Event 2 " comme signet ou le même script que extension Chrome .

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

9
webvitaly

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

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

5
Lunik

Si vous utilisez FireFox, vous devriez avoir FireBug installé. Une fois que vous avez cela, vous pouvez installer FireQuery, qui vous montrera quels événements jQuery sont liés à quels objets.

http://getfirebug.com/

http://firequery.binaryage.com/

3
Adrian J. Moreno

Vous trouverez ci-dessous quelque chose que j'ai utilisé dans le passé et qui pourrait être ce que vous recherchez. Cela permet de surveiller une propriété sur un élément de page (dans l'exemple ci-dessous, il s'agit de la propriété "Titre" du document), puis d'afficher une alerte avec la pile d'appels JS chaque fois que cette propriété est modifiée. Vous devrez insérer ces informations dans le DOM avant le code que vous essayez de détecter des incendies, mais nous espérons que vous serez en mesure d'identifier la cause du problème.

Je recommanderais d'utiliser Firefox et d'obtenir Firebug pour le débogage JavaScript.

// Call stack code
function showCallStack() {
   var f=showCallStack,result="Call stack:\n";

   while((f=f.caller)!==null) {
      var sFunctionName = f.toString().match(/^function (\w+)\(/)
      sFunctionName = (sFunctionName) ? sFunctionName[1] : 'anonymous function';
      result += sFunctionName;
      result += getArguments(f.toString(), f.arguments);
      result += "\n";
   }
   alert(result);
}


function getArguments(sFunction, a) {
   var i = sFunction.indexOf(' ');
   var ii = sFunction.indexOf('(');
   var iii = sFunction.indexOf(')');
   var aArgs = sFunction.substr(ii+1, iii-ii-1).split(',')
   var sArgs = ''; 
   for(var i=0; i<a.length; i++) {
      var q = ('string' == typeof a[i]) ? '"' : '';
      sArgs+=((i>0) ? ', ' : '')+(typeof a[i])+' '+aArgs[i]+':'+q+a[i]+q+'';
   }
   return '('+sArgs+')';
} 

var watchTitle = function(id, oldval, newval) { showCallStack(); }

// !! This is all you should need to update, setting it to whatever you want to watch.
document.watch("title", watchTitle);
2
Trey Combs

Utilisez-vous jQuery? Si oui, vous souhaitez rechercher l'une de ces trois lignes de code:

$("#buy").click //the div is refered by its id

ou

$(".buy").click //the div is refered to by the style "buy"

ou

$(".button").click //refered to by the style "button"

La plupart des navigateurs plus récents ont des "outils de développement" intégrés en appuyant sur F12 (au moins dans IE et Chrome). Cela peut vous aider à effectuer un débogage et un suivi supplémentaires.

0
Losbear
  1. Cliquez avec le bouton droit sur la page et choisissez d'afficher la source de la page
  2. Rechercher les balises <script>
  3. Recherchez $("#buy") et quelque chose mentionnant onClick ou .on("click",function(){...});
  4. Si vous ne le trouvez pas, recherchez quelque chose dans le sens suivant: document.getElementById("buy")
  5. Vous avez trouvé le function, ou code, où le code du gestionnaire d'événements est

$("#buy") est la façon de JQuery de dire trouver un élément qui a un attribut id de buy et s'il a un . le suivant avec une fonction, cela La fonction agit sur l'élément trouvé par JQuery.

0
Alex W