全球 javascript 事件 intercept/handling

Question

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

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

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

我想不出一种方法，即使它是一种丑陋的方法，也无法全面覆盖所有输入事件。

问题：

如何 intercept/handle 所有输入事件，无论是否传播事件，也不管使用的框架如何？

Answer 1

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

使用什么框架或在其他点处理什么事件并不重要。

处理特定事件：

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

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

Input <input type="text">

处理所有事件：

var inputs = document.querySelector("input");
for (var ev in inputs) {
    // Events starts with "on" -> onClick, onInput, ...
    if (/^on/.test(ev)) {
        document.addEventListener(ev.substring(2), someFunction);
    }
}

function someFunction(event) {
  if (event.target.tagName === 'INPUT') {
    console.log(event.type);
  }
};

function createInput() {
  var new_input = document.createElement("INPUT");
  new_input.setAttribute("type", "text");
  document.body.appendChild(document.createElement("BR"));
  document.body.appendChild(new_input);
}

Input <input type="text">
<br>
<button onclick="createInput()">Create Input</button>

已编辑：添加了捕获所有事件的示例。

已编辑： 捕获动态创建的输入事件。

全球 javascript 事件 intercept/handling

Global javascript event intercept/handling

javascript

events

event-handling

dom-events