Safe, universal, way to use addEventHandler in Javascript?

Question

Before I delve into the details of this problem, I would like to make the situation understandable. Our web analytics company works as a consultant on large sites, and (apart from adding one SCRIPT tag) we do not control the pages themselves.

Our existing SCRIPTs install handlers using the "old" way (the fancy version of element.onclick = blah; also executes the original handler), which is completely unaware of the "new" handlers (addEventListener or attachEvent) on the page. We would like to fix this so that our SCRIPT could work on other sites without requiring so much custom development.

The initial thought was to have our own SCRIPT use addEventListener / attachEvent, but this creates a problem: the handler is installed on the client site using the "old" method, it will destroy the handler that we installed the "new way. Quick and dirty testing shows that this happens both in IE7 and in FF3, although I have not tested the entire range of browsers, there is also a risk that if we use the “new” method after the page event handlers are already installed, we may remove x handlers.

So my question is: what safe technique can I use to add an event handler in Javascript using addEventListener / attachEvent, which works regardless of how other event handlers are installed on the page?

Remember: we have no way to change the site on which our SCRIPT is installed. (I must emphasize that since the default answer to such questions is always "just rewrite the page to do everything the same way.")

Answer 1

Can you try your quick and dirty testing again? This does not happen to me in FF3.

elem.onclick = function() { alert("foo"); }; elem.addEventListener("click", function() { alert("bar"); }, false); 

Both handlers fire for me when I click on an element.

I assume that you forgot the final boolean argument in addEventListener (use the capture phase). I also assume that you forgot that attachEvent IE needs onclick , not click .

Answer 2

addEventListener / attachEvent is safe in the sense you are asking for. They add a new event handler to Node without changing any previously added handlers to it (even after assignment via the onxxx property). The only practice should be a company that brings some to someone else’s page using addEventListener / attachEvent. Assigning the onxxx handler through properties would really lead to the loss of hosting pages (which were previously assigned in the same way)