javascript - 如何防止一个用户脚本中附加的事件处理程序干扰另一用户脚本？

Question

我安装了两个单独的用户脚本，每个脚本都需要使用 document.body.onkeydown 调用一些代码。但是，我注意到，启用两个用户脚本后，只会调用后一个事件处理程序。

显然，两个用户脚本共享相同的 DOM。这与我使用 Chrome 扩展程序的经验相反，每个 Chrome 扩展程序都有自己的沙箱。

无论哪种方式，现在我该如何解决这个问题？我希望两个处理程序都启动，并保持彼此分开。

我在启用了严格模式的 IIFE 中执行用户脚本。

Answer 1

使用document.body.keydown将回调设置为 keydown事件。再次设置将替换旧的。因此，后一个脚本的事件回调被触发。

而是使用 document.body.addEventListener(<callback>)在这两种情况下，这两个事件都会出现。

在下面的示例中，第一个 keydown 将被第二个 keydown 覆盖。 addEventListener 会将监听器附加到 keydown事件。所以按a仅触发了第三个事件。按 b ，第二个和第三个都被解雇。

这是因为通过旧方法添加的事件是作为类似的属性值添加的。就像，

<button id="show" onclick="show()">Click</button> 因此，它被替换了。

addEventListener将监听器添加到 DOM 对象的 EventListner 列表中。

在示例中，我替换了 onclick具有函数 hide 的属性通过旧方法，因此它仅调用 hide方法。

更多信息请引用MDN Docs

document.body.onkeydown = function(event){if(event.key=="a")console.log("keydown")};
document.body.onkeydown = function(event){if(event.key=="b")console.log("b keydown")};

document.body.addEventListener("keydown",function(){console.log("addEventListener")})

function show(){console.log("show")}
function hide(){console.log("hide")}

var element = document.getElementById("show");
element.onclick=hide;

<button id="show" onclick="show()">Click</button>