Глобальный javascript перехват / обработка события

Question

У меня есть большой веб-сайт, часть которого отображается в фреймворке (т. Е. React, Vue, Angular ...). Что мне нужно, так это способ обработки / перехвата всех входных событий (например, focus, onchange, onclick ...), чтобы я мог захватывать телеметрию всех пользовательских входов.

Мой первоначальный грубый метод был добавить захват телеметрии на уровне фреймворка (чтобы захватывались все нажатия кнопок). Но потом я понял, что все элементы управления вводом, которые отображаются вне рамок (каркасов), не будут захвачены.

Теперь я возвращаюсь к чертежной доске и задаюсь вопросом, если это даже выполнимо.

Я не могу придумать способ, даже если это некрасиво, охватить все входные события по всей доске.

Вопрос:

Как перехватывать / обрабатывать все входные события независимо от того, распространяются они события или нет, и независимо от используемых каркасов?

Answer 1

Этот пример записывает значение всякий раз, когда изменяется значение элемента.

Не имеет значения, какую платформу вы используете или какие события вы обрабатываете в других точках.

Обрабатывать специфику c событие:

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>

EDITED: Добавлен пример для захвата всех событий.

EDITED: Захват динамически создан входные события.