Get a handle on event listening in JavaScript

Question

Last week we released Omniture's analytics code onto a large volume of web sites after tinkering and testing for the last week or so.

On almost all of our site templates, it works just fine. In a few scattered, unpredictable situations, there is a crippling, browser-crashing experience that may turn away some users.

We're not able to see a relationship between the crashing templates at this time, and while there are many ways to troubleshoot, the one that's confuddling us is related to event listeners.

The sites crash when any anchor on these templates is clicked. There isn't any inline JS, and while we firebug'ed our way through the attributes of the HTML, we couldn't find a discernable loop or issue that would cause this. (while we troubleshoot, you can experience this for yourself here [warning! clicking any link in the page will cause your browser to crash!])

How do you determine if an object has a listener or not? How do you determine what will fire when event is triggered?

FYI, I'd love to set breakpoints, but between Omnitures miserably obfuscated code and repeated browser crashes, I'd like to research more thoroughly how I can approach this.

Answer 1

DOM doesn't provide any means to introspecting through the events listeners' collections associated with a node.

The only situation where listener can be identified is when it was added through setting a property or an attribute on the element - check on onxxx property or attribute.

There have been a talk recently on WebAPI group at W3 on whether to add this functionality. Specialists seem to be against that. I share their arguments.

Answer 2

A set of recommendations to the implementers of on-page analytics:

• Use document-level event capturing only, this is in almost every case (besides change/submit events) sufficient

• Do not execute computation-intensive code (as well as any IO operations) in the handlers, rather postpone execution with a timeout

If this two simple rules are taken into account, I bet your browser will survive

Answer 3

I did an "inspect element" on a link in that page with firebug, and in the DOM tab it says there is an onclick function (anonymous), and also some other function called "s_onclick_0".

I coaxed firebug placing a watch like

alert(document.links[0].onclick)

to alert me the onclick function that omniture (i guess) attaches to links:

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

Maybe in the same way you can see what it is really running after all that obfuscation.

Answer 4

While traveling home I came to a solution that allows for introspection of event handlers on element added with AddEventListener. Run code before the inclusion of your analytics code. The code was not verified if works, but the idea, I guess is clear. It won't work in IE, however you can apply similar technique (of rewriting the API member) there as well.

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

Answer 5

I have some experience with Omniture and looking at your s_code.js, you have several things going on in the "Link Tracking" area, for example:

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

I would consult with the people at Omniture and verify that your link tracking configuration is set up correctly.

Specifically, this template and the links inside seem to belong to morningsun.net and yet morningsun.net is not in the s.linkInternalFilters setting. If you are using the same s_code.js file for multiple domains, you can use javascript to set the configuration values for things like this (basing on the document.location.hostname for instance).

I don't personally have experience with the link tracking configuration or I would give you more detail on how to configure it :)