在 Javascript 中使用 addEventHandler 的安全、通用方法？
在详细讨论这个问题之前，我想先澄清一下情况。 我们的网络分析公司充当大型网站的顾问，并且（除了添加单个 SCRIPT 标签之外）我们无法控制页面本身。
我们现有的脚本使用“旧”方式安装处理程序（element.onclick = blah的奇特版本；它也执行原始处理程序），它完全不知道页面上的“新”（addEventListener或attachEvent）处理程序。 我们希望修复此问题，以使我们的脚本能够在更多站点上运行，而不需要太多的自定义开发。
这里最初的想法是让我们自己的脚本使用 addEventListener/attachEvent，但这提出了一个问题：客户端站点使用“旧”方式设置处理程序，它会清除我们以“新”方式安装的处理程序。 快速而肮脏的测试表明这种情况在 IE7 和 FF3 中都会发生，尽管我没有测试整个浏览器范围。 还有一个风险是，如果我们在设置页面的事件处理程序后使用“新”方式，我们可能会删除它们的处理程序。
所以我的问题是：我可以使用什么安全技术来使用 addEventListener/attachEvent 在 Javascript 中添加事件处理程序，无论页面上的其他事件处理程序如何安装，该技术都可以正常工作？
请记住：我们无法修改安装脚本的站点。 （我必须强调，因为此类问题的默认答案始终是“只需重写页面即可以相同的方式完成所有操作。”）
Before I get into the details of this problem, I'd like to make the situation clear. Our web analytics company 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 completely 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.")
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你能再尝试一次快速而肮脏的测试吗？ 在《FF3》中我不会遇到这种情况。
当我单击该元素时，两个处理程序都会为我触发。
我猜您忘记了 addEventListener 中的最后一个布尔参数（是否使用捕获阶段）。 我还猜测您忘记了 IE 的
attachEvent需要onclick，而不是click。Can you try your quick-and-dirty testing again? This doesn't happen for me in FF3.
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'sattachEventneedsonclick, notclick.从某种意义上说，addEventListener/attachEvent 是安全的。 他们向 Node 添加新的事件处理程序，而不更改之前添加到其中的任何处理程序（即使是通过属性 onxxx 分配的）。 对于将某些内容带到国外页面的公司来说，使用 addEventListener/attachEvent 必须是唯一的做法。 通过属性分配 onxxx 处理程序确实会破坏托管页面 scipts（之前已以相同方式分配）
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 company 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)