Global javascript event intercept/handling

Question

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?

What do you mean by all input events? AFAIK, there is no such type of events. input is just the name of one UIEvent. focus is a FocusEvent, onchange is UIEvent, onclick is a MouseEvent... — Petr Srníček
– Petr Srníček, Commented Mar 5, 2020 at 18:59

John · Accepted Answer · 2020-03-05 19:42:41Z

1

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.

edited Mar 5, 2020 at 19:42

answered Mar 5, 2020 at 18:21

John

7901 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AlvinfromDiaspar Over a year ago

Thanks. this is brilliant.

VLAZ Over a year ago

But what about all other events?

John Over a year ago

@VLAZ New version can capture all events.

Petr Srníček Over a year ago

This will not register events on elements inserted into the DOM dynamically later. It might be better to attach the event listener to document (perhaps a capturing one to register events before any other event listeners get the chance to prevent bubbling by calling stopPropagation).

AlvinfromDiaspar Over a year ago

@John - Thank you for using good grammar, punctuation, and providing an elegant/simple/easy-to-follow snippets. This is an amazing answer.

Collectives™ on Stack Overflow

Global javascript event intercept/handling

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related