JavaScript - Can you detect wether an event was triggered by the user or the app?

Question

I know that this is possible with for mouse events using the MouseEvent constructor.

For example, with the MouseEvent constructor, you can simulate mouse clicks easily. With this approach, I can add additional fields to my "fake" mouse event such as

var event = new MouseEvent(type, mouseEventInit)'
event.fake = true

that allows me to detect in the listener wether this event was triggered by the user or the app.

I would like to do something similar with a html video when it is played/paused/seeked. The video can either be controlled by my app (calling video.play() , video.pause() or setting video.currentTime = x ) or the user (using the video controls normally) at any given time. When the event listeners I added are fired I do not have a way to know who or what was the source (the user or my app).

So basically, I don't want to listen to events triggered by my app but I do want to listen to user actions (the user clicked on the play button or seeked in the video by clicking somewhere on the progress bar).

My current approach is to remove the listeners and add them back afterwards like so:

video.removeEventListener('play', playListener)
video.play()
// I have to wait until the video actually plays
setTimeout(function() {
  video.addEventListener('play', playListener)
}, 100)

It works fine, but when I do this for seeking, it's harder to select a good time for settimeout because of video buffering (it seems like the seeked event is triggered after the video finished buffering). So I'm exploring different methods.

I know about the CustomEvent() constructor, but I doubt I could use this to actually play or seek. I need to create an event that will trigger the appropriate actions (play, pause or seek). Feel free to correct me if I'm wrong.

Any other ideas I could detect events triggered by my app and/or the user?

Answer 1

You can attach a Boolean to object passed to event handler to determine if event was dispatched in response to user action or application action.

 var button = document.querySelector("button"); var div = button.nextElementSibling; var app = { config: "def", userAction: "abc", setApp: function setApp(duration) { this.timeout = setTimeout(function() { button.dispatchEvent(appEvent) }, duration || 3500); }, timeout: null } // dispatch `app` event app.setApp(0); function handleEvent(event) { // check `event.detail.app` object `Boolean` value if (event.detail.app) { div.textContent = app.config; } else { div.textContent = app.userAction; // dispatch `app` event in 3500ms app.setApp(); } } button.onclick = handleEvent; // set plain object having `Boolean` value at `event.detail` `{app:true}` var appEvent = new CustomEvent("click", { detail: { app: true } }); 

 <button>click</button> <div></div>