全局javascript事件拦截/处理

Question

我有一个大型网站，其中的一部分是由框架（即React，Vue，Angular ...）呈现的。我需要的是一种处理/拦截所有输入事件（例如，焦点，onchange，onclick ...）的方法，以便我可以捕获所有用户输入的遥测。

我最初的蛮力方法是在框架级别添加遥测捕获（以便捕获所有按钮单击）。但是后来我意识到在框架之外渲染的所有输入控件将不会被捕获。

现在我要回到绘图板上，想知道这是否可行。

我想不出一种方法来覆盖所有输入事件，即使这是一种丑陋的方法。我想从S.O.社区。

问题：

如何拦截/处理所有输入事件，而不管是否传播事件，以及使用的框架如何。

Answer 1

此示例在元素值更改时记录值。

var inputs = document.querySelector("input");

inputs.addEventListener('input', (event) => {
  console.log('input value!', event.data);
});

Input <input type="text">