React to ANY activity on page

Question

I need a function ( I think a JS function but not sure) that would react to any acitvity on the page. If a user clicks anywhere, types anything ..whatever they do on the page EVERY time I need this reaction to happen. For the needs of this question let's say that the recation I am looking for is

alert ('user did something');

PHP runs on the server and when the page hits the browser, the PHP script is completed for some time. There is no reason to tag this question using [tag:php]. — axiac, Jan 26 '18 at 16:17
Register an event for `document` on `click`, `keydown`, `keyup` etc... Also, why do you want such a thing? There may be easier solutions for particular tasks. — Federico klez Culloca, Jan 26 '18 at 16:23
`window.onclick = window.onchange = window.onmousemove = () => alert("sth");` — Jonas Wilms, Jan 26 '18 at 16:23
Why on earth would you want to do this? It would essentially make the page unusable. there is no `everything` event to hook into — Liam, Jan 26 '18 at 16:24
using jquery `$(document).ready(function() { $(this).on('keyup keypress blur change click focus', function() { console.log('user did something'); }); });` — mike123, Jan 26 '18 at 16:25
The list of available events is [here](https://developer.mozilla.org/en-US/docs/Web/Events). You could bind to everything in that list if you needed to. There isn't a wildcard that means "all of them" because that's rarely if ever useful. (Note also that `alert()` will cause problems with many types of event that fire continuously, such as scroll events...) — Daniel Beck, Jan 26 '18 at 16:25

score 1 · Accepted Answer · edited Jan 26 '18 at 16:32

Below is a sample of what you need.

Basically, you need to listen to every event on the page, but you do it at the most top level (window).

function logEvent(eventName) {
console.log('user did something:', eventName); }
window.addEventListener('keydown', logEvent.bind(window, 'keydown'));

window.addEventListener('keyup', logEvent.bind(window, 'keyup'));

window.addEventListener('click', logEvent.bind(window, 'click'));

window.addEventListener('touchstart', logEvent.bind(window, 'touchstart'));

window.addEventListener('touchend', logEvent.bind(window, 'touchend'));

window.addEventListener('scroll', logEvent.bind(window, 'scroll'));

<input type="text" />
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>
<p>Enable scroll</p>

React to ANY activity on page

1 Answers1