CODEWITHSUNDEEP
javascripteventsevent-handlingdom-events
AlvinfromDiaspar
AlvinfromDiaspar

Reputation: 6814

Global javascript event intercept/handling

I have a large website where a sub-portion of it is rendered by a framework (i.e. React, Vue, Angular...). What I need is a way to handle/intercept all input events (e.g. focus, onchange, onclick ...) so that I can capture telemetry of all user inputs.

My initial brute-force approach was to add telemetry capturing at the framework level (so that all button clicks are captured). But then I realized all the input controls that are rendered outside of the framework(s) will not be captured.

Now I'm going back to the drawing board and wondering if this is even feasible.

I can't think of a way, even if its an ugly way, to cover all input events across the board.

Question:

How to intercept/handle all input events regardless of propagated events or not, and regardless of frameworks used?

Upvotes: 0

Views: 612

Answers (1)

John
John

Reputation: 770

This example records the value whenever the value of the element is changed.

It doesn't matter what framework you use or what events you handle at other points.

Handle specific event:

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

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

Handle all events:

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: Added example to capture all events.

EDITED: Capture dynamically created input events.

Upvotes: 1

Related Questions