在 Javascript 中使用 addEventHandler 的安全、通用方式？答案

【问题标题】：Safe, universal, way to use addEventHandler in Javascript?在 Javascript 中使用 addEventHandler 的安全、通用方式？
【发布时间】：2010-09-18 09:18:09
【问题描述】：

在深入探讨这个问题之前，我想先说明一下情况。我们的网络分析公司是大型网站的顾问，并且（除了添加单个 SCRIPT 标签）我们无法控制页面本身。

我们现有的脚本使用“旧”方式安装处理程序（element.onclick = blah 的花哨版本；它也执行原始处理程序），完全不知道页面上的“新”（addEventListener 或 attachEvent）处理程序。我们希望解决此问题，以使我们的脚本能够在更多网站上运行，而无需进行太多自定义开发。

这里最初的想法是让我们自己的脚本使用 addEventListener/attachEvent，但这带来了一个问题：客户端的站点使用“旧”方式设置处理程序，它会清除我们安装“新”的处理程序大大地。快速而肮脏的测试表明，这在 IE7 和 FF3 中都会发生，尽管我没有测试整个浏览器范围。还有一个风险是，如果我们在页面的事件处理程序已经设置后使用“新”方式，我们可能会删除它们的处理程序。

所以我的问题是：我可以使用什么安全的技术来使用 addEventListener/attachEvent 在 Javascript 中添加一个事件处理程序，无论页面上的其他事件处理程序是如何安装的，它都能正常工作？

请记住：我们无法修改安装我们脚本的站点。（我必须强调，因为此类问题的默认答案始终是，“只需重写页面，以相同的方式完成所有操作。”）

【问题讨论】：

标签： javascript events dom attachevent

【解决方案1】：

你能再试试你的快速而肮脏的测试吗？这在 FF3 中不会发生在我身上。

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

当我单击元素时，两个处理程序都会为我触发。

我猜你忘记了addEventListener 中的最后一个布尔参数（是否使用捕获阶段）。我也猜你忘记了 IE 的attachEvent 需要onclick，而不是click。

【讨论】：

这在 IE 或任何其他浏览器中都不是问题，因为如果提问者“猜测”的行为在现实中，这将导致任何客户端代码出现严重问题
啊，你似乎是对的。为这个问题道歉，显然错误是一个糟糕的测试用例，而不是浏览器中的任何特定错误。（至少 IE7 和 FF3。）感谢您为我指明正确的方向。

【解决方案2】：

addEventListener/attachEvent 在某种意义上是安全的。他们将新的事件处理程序添加到节点，而不会更改以前添加到它的任何处理程序（即使曾经通过属性 onxxx 分配）。对于使用 addEventListener/attachEvent 将一些内容带到外国页面的公司，必须是唯一的做法。通过属性分配 onxxx 处理程序确实会破坏托管页面 scipts（以前以相同的方式分配）

【讨论】：

是的，但是这里的问题是如果页面那么使用 element.onclick="";在我们使用 addEventListener 之后，它会删除我们的监听器。我们现有的安装处理程序的方式适用于 element.onclick="" 因为我们保存处理程序的先前内容并在我们的触发时“模拟”它。
再次阅读我的文字 - 刚刚更正。 element.onclick 确实不会删除您使用 addEventListener/attachEvent 添加的处理程序另外：“模拟”事件是更严重的弊端之一，请不要这样做。
Re: 模拟事件，你要记住这是一个相当“老”（在 Internet 术语中）的产品，根本没有其他方法可以兼容 IE 5 和 5.5 .
我敢打赌，IE5、IE5.5 和 IE6 之间几乎没有功能差异（事实上，在较新的版本中添加了新功能，例如 CSS 表达式或 HTC 等）