当 addEventListener 不起作用时，在事件触发之前拦截事件

Question

我一直在维护一个用 React 编写的小项目。它是一个浏览器扩展，为 Facebook Messenger 添加了类似 Slack 的表情符号支持。由于 Facebook 偶尔会改变一些东西，我需要对浏览器扩展进行新的更改，以便它们像以前一样工作。

Facebook 使用 a<div>并将contenteditable属性设置为 true。从我记事起，他们就一直这样做。然而，他们改变了一些东西，因为我曾经能够做到：

document.querySelector("div[contenteditable=true]").addEventListener(e => {
    if(e.key == "Enter" && isActive) { //isActive means if the emoji picker is visible or not
        e.preventDefault();
        e.stopPropagation();
        selectEmoji();
    }
});

但是，即使该元素存在，该事件也不再触发。除了 Enter 之外，每个键都会触发它。所以我开始用 MutationObserver 进行挖掘，令我惊讶的是，我注意到了这一点：

removedNodes: NodeList[<div with contenteditable=true>]
addedNodes: NodeList[NEW <div with contenteditable=true>]

因此，一旦我按下 Enter 键，Facebook 就会发送消息，然后用新的聊天框元素替换整个“聊天框”元素（contenteditable=true 的 div）。

我不明白的是，当我按 Enter 键时，我的 addEventListener 如何没有触发。即使我做了这样的事情，它也不会起作用：

setInterval(() => {
    var chatbox = document.querySelector("div[contenteditable=true]");
    chatbox.addEventListener("keydown", () => ........ });
}, 1000);

即使 Facebook 删除了该元素，我的活动难道不应该触发吗？根据我在这里的测试，它应该触发（至少第一次）： https: //jsfiddle.net/web4dyg1/

既然添加事件监听器，然后取消 Facebook 的请求（之前的表单提交），就不再起作用了，我还有什么其他选择？我知道这个问题确实很小众，但我希望有人能有一个打破常规的想法。

编辑：我需要澄清添加事件监听器是有效的。除了 Enter 键之外，每个按键都会触发事件。