events - Safe, universal, way to use addEventHandler in Javascript? - Stack Overflow

admin管理员组

文章数量:1312673

Before I get into the details of this problem, I'd like to make the situation clear. Our web analytics pany works as a consultant for large sites, and (other than adding a single SCRIPT tag) we have no control over the pages themselves.

Our existing script installs handlers using "old" way (a fancy version of element.onclick = blah; that also executes the original handler) which is pletely unaware of "new" (addEventListener or attachEvent) handlers on the page. We'd like to fix this to make our script able to run on more sites without requiring as much custom development.

The initial thought here was to have our own script use addEventListener/attachEvent, but this presents a problem: of the client's site sets a handler using the "old" way, it would wipe out the handler we installed the "new" way. Quick and dirty testing shows this happens in both IE7 and FF3, although I didn't test the whole range of browsers. There's also a risk that if we use the "new" way after the page's event handlers are already set, we could erase their handlers.

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

Please remember: we have no way of modifying the site that our script is installed on. (I have to emphasize that because the default answer to questions like this is always, "just rewrite the page to do everything the same way.")

Before I get into the details of this problem, I'd like to make the situation clear. Our web analytics pany works as a consultant for large sites, and (other than adding a single SCRIPT tag) we have no control over the pages themselves.

Our existing script installs handlers using "old" way (a fancy version of element.onclick = blah; that also executes the original handler) which is pletely unaware of "new" (addEventListener or attachEvent) handlers on the page. We'd like to fix this to make our script able to run on more sites without requiring as much custom development.

The initial thought here was to have our own script use addEventListener/attachEvent, but this presents a problem: of the client's site sets a handler using the "old" way, it would wipe out the handler we installed the "new" way. Quick and dirty testing shows this happens in both IE7 and FF3, although I didn't test the whole range of browsers. There's also a risk that if we use the "new" way after the page's event handlers are already set, we could erase their handlers.

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

Please remember: we have no way of modifying the site that our script is installed on. (I have to emphasize that because the default answer to questions like this is always, "just rewrite the page to do everything the same way.")

• javascript
• events
• dom
• attachevent

Share Improve this question Follow edited Oct 21, 2008 at 18:54 Sergey Ilinsky 31.5k99 gold badges5656 silver badges5656 bronze badges asked Oct 21, 2008 at 18:33 blakeyratblakeyrat 10111 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Can you try your quick-and-dirty testing again? This doesn't happen for me in FF3.

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

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

I'm guessing you forgot the final boolean argument in addEventListener (whether to use the capture phase). I'm also guessing you forgot that IE's attachEvent needs onclick, not click.

addEventListener/attachEvent is safe in a sense you ask. They add a new event handler to a Node without altering any handlers previously added to it (even once assigned through a property onxxx). For a pany that bring some to a foreign page using addEventListener/attachEvent must be the only practice. Assigning onxxx handler via properties indeed would break hosting pages scipts (that have been previously assigned the same way)

本文标签： eventsSafeUniversalway to use addEventHandler in JavascriptStack Overflow