How to detect JavaScript events on third party sites

Question

Is there any way (implemented or just in theory) that one could detect JavaScript events and actions assigned on a third party site?

If I am injecting JavaScript into a foreign site and want to avoid overwriting onsubmit, onclick, onfocus and other such events, is there any way to detect and extend such callbacks rather than overwrite them?

Ideas I've had:

run the site in a headless browser or JavaScript engine before hand to capture all executed JavaScript
parse the JavaScript on the fly and hope the third party JavaScript conforms to my parser's expectations

score 4 · Accepted Answer · edited May 23 '17 at 11:48

If you just want to add new event handlers without overwriting the existing event handlers, you can use addEventListener() or attachEvent() (for older versions of IE) instead of setting .onclick, .onsubmit, etc... to add a new event handler without affecting the previous event handlers.

Here's a simple cross browser function to add an event:

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

There is no cross browser way that I'm aware of from regular javascript to interrogate existing DOM objects to see which ones have regular javascript event handlers installed via addEventListener or attachEvent. If the event handlers are installed with jQuery, they can be interrogated via this technique.

There is some future spec work that has been done to add a property that would list all the event handlers, but I am not sure it is implemented yet. You can read more about that here.

For event handlers installed with onclick, onsubmit, onfocus, etc..., you can check all existing DOM elements to see which ones have handlers assigned for those events and you can then hook them if you want to.

// add other events here you are interested in
var events = ["onclick", "onsubmit", "onfocus", "onblur"];
var elems = document.getElementsByTagName("*"), item;
for (var i = 0; i < elems.length; i++) {
    item = elems[i];
    for (var j = 0; j < events.length; j++) {
        if (item[events[j]]) {
            console.log("event handler for " + events[j]);
        }
    }
}

This is the second half of the problem. The first half is knowing what dom elements have events assigned to them before I start attaching my events to the third party dom. — Daniel Nill, Oct 02 '12 at 01:15
@DanielNill - I've added more information to my answer. I must say that your question was not clear you wanted this other part and you'd probably get more valuable information to help if you told us more about what you're really trying to accomplish. — jfriend00, Oct 02 '12 at 01:52
thanks, your follow up is amazing and exactly what I was looking for. Sorry that the original question wasn't clear. — Daniel Nill, Oct 02 '12 at 02:14

score 1 · Answer 2 · answered Oct 02 '12 at 05:13

You can actually get what you want by changing the prototype of addEventListener and attachEvent:

// intercept events cross browser
var method;
if (HTMLElement.prototype.addEventListener) {
  method = 'addEventListener';
} else {
  method = 'attachEvent';
}
HTMLElement.prototype.realAddEventListener = HTMLElement.prototype[method];
HTMLElement.prototype[method] = function(a,b,c) {
  console.log('here are all the events being added:', arguments);
  this.realAddEventListener(a,b,c);
};

Of course, it's important that this is added into the page before any other page scripts, but it can come after or before libraries like jQuery, but might have conflicts on the prototype with prototype.js, not sure.

You'll also want to check for onclicks and the whole set of events, which you can find by running console.dir(document.createElement('a')) in a javascript console.

How to detect JavaScript events on third party sites

2 Answers2