我有一个大型网站,其中的一部分是由框架(即React,Vue,Angular ...)呈现的。 我需要的是一种处理/拦截所有输入事件(例如,焦点,onchange,onclick ...)的方法,这样我就可以捕获所有用户输入的遥测信息。
我最初的蛮力方法是在框架级别添加遥测捕获(以便捕获所有按钮单击)。但是后来我意识到,在框架之外呈现的所有输入控件都不会被捕获。
现在我要回到绘图板上,想知道这是否可行。
即使是丑陋的方式,我也想不出一种方法来覆盖所有输入事件。
问题:
如何拦截/处理所有输入事件,而不管是否传播事件以及所使用的框架如何?
答案 0 :(得分: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>
已编辑:添加了捕获所有事件的示例。
已编辑:捕获动态创建的输入事件。