Controla la escucha de eventos en JavaScript

Question

La semana pasada, lanzamos el código de análisis de Omniture en un gran volumen de sitios web después de probar y hacer pruebas durante la última semana, aproximadamente.

En casi todas nuestras plantillas de sitio, funciona bien. En algunas situaciones dispersas e impredecibles, existe una experiencia paralizante y que bloquea el navegador que puede rechazar a algunos usuarios.

No podemos ver una relación entre las plantillas que fallan en este momento, y si bien hay muchas formas de solucionar problemas, la que nos confunde está relacionada con los oyentes de eventos.

Los sitios se bloquean cuando se hace clic en cualquier ancla en estas plantillas. No hay ningún JS en línea, y mientras nos disparamos a través de los atributos del HTML, no pudimos encontrar un bucle o problema discernible que pudiera causar esto. (mientras solucionamos los problemas, puedes experimentar esto por ti mismo aquí [ advertencia ! Al hacer clic en cualquier enlace de la página, su navegador se bloqueará.])

¿Cómo determinas si un objeto tiene un oyente o no? ¿Cómo determinas qué disparará cuando se active el evento?

  

FYI, me encantaría establecer puntos de interrupción, pero    entre Omnitures código ofuscado miserablemente y navegador repetido   choca , me gustaría investigar más   a fondo cómo puedo abordar esto.

Answer 1

Hice un " elemento de inspección " en un enlace en esa página con firebug, y en la pestaña DOM dice que hay una función onclick (anónima), y también otra función llamada " s_onclick_0 " ;.

Engatusé a Firebug colocando un reloj como

alert(document.links[0].onclick)

para alertarme sobre la función onclick que omniture (supongo) se adjunta a los enlaces:

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

Quizás de la misma manera puedes ver lo que realmente se está ejecutando después de toda esa ofuscación.

Answer 2

DOM no proporciona ningún medio para realizar una introspección a través de las colecciones de escuchas de eventos asociadas a un nodo.

La única situación en la que se puede identificar al oyente es cuando se agregó mediante la configuración de una propiedad o un atributo en el elemento: verifique la propiedad o el atributo de onxxx.

Recientemente se ha hablado sobre el grupo WebAPI en W3 sobre si agregar esta funcionalidad. Los especialistas parecen estar en contra de eso. Comparto sus argumentos.

Answer 3

Un conjunto de recomendaciones para los implementadores de análisis en página:

• Use solo la captura de eventos a nivel de documento, esto es en casi todos los casos (además de los eventos de cambio / envío) suficiente

• No ejecute código de uso intensivo de computación (como tampoco cualquier operación de E / S) en los controladores, en lugar de posponer la ejecución con un tiempo de espera

Si se toman en cuenta estas dos reglas simples, apuesto a que su navegador sobrevivirá

Answer 4

Tengo algo de experiencia con Omniture y al ver tu s_code.js, tienes varias cosas en el " Seguimiento de enlaces " área, por ejemplo:

/* 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"

Consultaría con la gente de Omniture y verificaría que su configuración de seguimiento de enlaces esté configurada correctamente.

Específicamente, esta plantilla y los enlaces internos parecen pertenecer a morningsun.net y, sin embargo, morningsun.net no se encuentra en la configuración de s.linkInternalFilters. Si está utilizando el mismo archivo s_code.js para varios dominios, puede usar javascript para establecer los valores de configuración para cosas como esta (por ejemplo, basándose en document.location.hostname).

Personalmente, no tengo experiencia con la configuración de seguimiento de enlaces o le daría más detalles sobre cómo configurarlo :)

Answer 5

Mientras viajaba a casa llegué a una solución que permite la introspección de los controladores de eventos en el elemento agregado con AddEventListener. Ejecute el código antes de la inclusión de su código de análisis. El código no fue verificado si funciona, pero la idea, creo que es clara. No funcionará en IE, sin embargo, también puede aplicar una técnica similar (para volver a escribir el miembro de la API).

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