Obtenez un aperçu de l'écoute d'événement en JavaScript

Question

La semaine dernière, nous avons publié le code d'analyse d'Omniture sur un grand nombre de sites Web après avoir bricolé et testé la semaine dernière.

Sur presque tous les modèles de site, cela fonctionne très bien. Dans quelques situations dispersées et imprévisibles, il existe une expérience bloquante et bloquant le navigateur qui peut éloigner certains utilisateurs.

Nous ne sommes pas en mesure de voir une relation entre les modèles qui tombent en panne pour le moment. Bien qu'il existe de nombreuses façons de résoudre les problèmes, celui qui nous embrouille est lié aux écouteurs d'événements.

Les sites se bloquent lorsque vous cliquez sur une ancre sur ces modèles. Il n'y a pas de JS en ligne et, bien que nous nous frayions un chemin à travers les attributs du code HTML, nous ne pouvions pas trouver de boucle discernable ni de problème qui en résulterait. (Pendant que nous résolvons les problèmes, vous pouvez en profiter par vous-même ici [ avertissement ! En cliquant sur un lien de la page, votre navigateur se bloquera!])

Comment déterminez-vous si un objet a un auditeur ou non? Comment déterminez-vous ce qui va se déclencher lorsqu'un événement est déclenché?

  

FYI, j'aimerais définir des points d'arrêt, mais    entre Omnitures, un code lamentablement obscurci et un navigateur répété   accidents , je voudrais approfondir mes recherches   soigneusement comment je peux aborder cela.

Answer 1

J'ai fait un "élément inspecter". sur un lien de cette page avec firebug, et dans l'onglet DOM, il est indiqué qu'il existe une fonction onclick (anonyme), ainsi qu'une autre fonction appelée "s_onclick_0".

J'ai persuadé Firebug de placer une montre comme

alert(document.links[0].onclick)

pour me prévenir de la fonction onclick que Omniture (je suppose) attache aux liens:

function anonymous(e) {
  var s = s_c_il[0], b = s.eh(this, "onclick");
  s.lnk = s.co(this);
  s.t();
  s.lnk = 0;
  if (b) {
     return this[b](e);
  }
  return true;
}

Peut-être pouvez-vous voir de la même manière ce qui se passe réellement après tout ce qui est obscurci.

Answer 2

DOM ne fournit aucun moyen d'introspection dans les collections d'écouteurs d'événements associées à un nœud.

La seule situation dans laquelle un programme d'écoute peut être identifié est le moment où il a été ajouté via la définition d'une propriété ou d'un attribut sur l'élément. Vérifiez la propriété ou l'attribut onxxx.

Il y a eu récemment un débat sur le groupe WebAPI au W3 sur l'opportunité d'ajouter cette fonctionnalité. Les spécialistes semblent être contre cela. Je partage leurs arguments.

Answer 3

Un ensemble de recommandations à l'intention des développeurs d'applications d'analyse sur page:

• N'utilisez que la capture d'événements au niveau du document. Dans la plupart des cas, cela suffit (en plus des événements de modification / soumission), cela suffit

• N'exécutez pas de code gourmand en calculs (ni aucune opération IO) dans les gestionnaires, mais en retardez l'exécution avec un délai d'attente

Si ces deux règles simples sont prises en compte, je parie que votre navigateur survivra

Answer 4

J'ai quelques expériences avec Omniture et, en regardant votre s_code.js, plusieurs choses se passent dans le "Suivi des liens". zone, par exemple:

/* Link Tracking Config */
s.trackDownloadLinks=true
s.trackExternalLinks=true
s.trackInlineStats=true
s.linkDownloadFileTypes="exe,zip,wav,mp3,mov,mpg,avi,wmv,pdf,doc,docx,xls,xlsx,ppt,pptx"
s.linkInternalFilters="javascript:,gatehousemedia.com"
s.linkLeaveQueryString=false
s.linkTrackVars="None"
s.linkTrackEvents="None"

Je consulterais les personnes chez Omniture et vérifierais que votre configuration de suivi des liens est correctement configurée.

Plus précisément, ce modèle et les liens qu'il contient semblent appartenir à morningsun.net et pourtant, morningsun.net ne se trouve pas dans le paramètre s.linkInternalFilters. Si vous utilisez le même fichier s_code.js pour plusieurs domaines, vous pouvez utiliser javascript pour définir les valeurs de configuration de choses similaires (en vous basant sur le document.location.hostname, par exemple).

Je n'ai personnellement aucune expérience de la configuration du suivi des liens ou je vous donnerais plus de détails sur sa configuration:)

Answer 5

En rentrant chez moi, je suis arrivé à une solution qui permet d’introspection des gestionnaires d’événements sur un élément ajouté avec AddEventListener. Exécutez le code avant l'inclusion de votre code d'analyse. Le code n'a pas été vérifié si fonctionne, mais l'idée, je suppose, est claire. Cela ne fonctionnera pas dans IE, cependant vous pouvez également appliquer une technique similaire (de réécrire le membre de l'API).

(function(){
  var fAddEventListener = HTMLElement.prototype.addEventListener;
  HTMLElement.prototype.addEventListener = function() {
   if (!this._listeners)
      this._listeners = [];
   this._listeners.push(arguments);
   fAddEventListener.apply(this, arguments);
  }
})();