javascript - 阻止新事件附加到元素

Question

我正在将事件绑定(bind)到一个元素。

如何防止新的 JavaScript 事件绑定(bind)到它？

我想防止未知脚本使用我的元素。

Answer 1

您无法阻止未知脚本将事件监听器附加到您的对象。浏览器不提供该功能。浏览器确实会阻止从其他域(其他窗口、选项卡或框架)运行的脚本弄乱您的 DOM，但如果脚本位于同一域甚至同一页面中，则它可以自由地执行它想做的任何操作到该页面中的 DOM。

如果您遇到未知脚本做坏事的问题，那么您可能最好向后退一步，向上描述您真正想要防止的事情，因为试图阻止事件监听器就像试图阻止某人一样当它们已经在你的房子里自由漫步时，就从一个抽屉里拿出来。您可能需要在更高级别上保护事物。

<小时/>

如果您想进入“黑客”领域来尝试阻止特定类型的代码，有一些选择。如果第三方代码想要绕过它们，这些并不是万无一失的。换句话说，如果您可以看到第 3 方代码的作用并且它不会自行调整以试图绕过您，那么这些将会更有用:

首先，您可以在安装事件处理程序后替换 elem.addEventListener()，这将阻止其他代码在该对象上使用 elem.addEventListener()再次。

var item = document.getElementById("test");
item.addEventListener("click", function() {
    log("original event handler");
});

// install "do nothing" override method
item.oldAddEventListener = item.addEventListener;
item.addEventListener = function() {};

// this one will do nothing because addEventListener has been replaced
item.addEventListener("click", function() {
    log("2nd event handler");
});

演示:http://jsfiddle.net/jfriend00/C5rzN/

这并不是万无一失的，因为还有其他方法可以安装直接从原型(prototype)调用方法或使用 onclick 属性的事件处理程序。