CODEWITHSUNDEEP
javascript
user1032531
user1032531

Reputation: 26281

Detect any user action event

How can a function be executed whenever this is any user activity such as moving or scrolling the mouse or pressing a key? I am thinking something similar to the following, however, likely other events will be required. Ideally, jQuery would not be required.

document.body.addEventListener('mouseover', resetTimer);
window.addEventListener('scroll', resetTimer);
document.addEventListener('keydown', resetTimer);

The purpose is for implementing a JavaScript based page rotator that will start after X seconds of user inactivity.

Upvotes: 4

Views: 4797

Answers (1)

Tomas Langkaas
Tomas Langkaas

Reputation: 4731

There are several events you could listen to, I believe these should cover the most:

  • mousedown to capture click events
  • mousemove to capture cursor movements
  • touchstart to capture taps (on touchscreens)
  • keydown to capture key events
  • scroll to capture scrolling

See demo code below.

document.addEventListener('mousedown', viewEvent);
document.addEventListener('mousemove', viewEvent);
document.addEventListener('touchstart', viewEvent);
document.addEventListener('scroll', viewEvent);
document.addEventListener('keydown', viewEvent);

function viewEvent(evt){
  document.getElementById('viewEvent').innerHTML = evt.type;
}
#viewEvent{
  position: fixed;
  padding: .2em;
  background: #ccc;
}
<div id="viewEvent"></div>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>
dummy text<br>

Upvotes: 4

Related Questions