JavaScript - Können Sie feststellen, ob ein Ereignis vom Benutzer oder von der App ausgelöst wurde?

Question

Ich weiß, dass dies für Mausereignisse mit dem MouseEvent-Konstruktor möglich ist.

Mit dem MouseEvent-Konstruktor können Sie beispielsweise Mausklicks einfach simulieren. Mit diesem Ansatz kann ich zusätzliche Felder zu meinem „fake“ Maus-Ereignis hinzufügen, wie

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

, die mich in dem Hörer zu erkennen erlaubt, ob dieses Ereignis durch den Benutzer oder die App ausgelöst wurde.

Ich möchte etwas ähnliches mit einem HTML-Video tun, wenn es gespielt/pausiert/seeked. Das Video kann entweder von meiner App (video.play(), video.pause() oder Einstellung video.currentTime = x) oder der Benutzer (unter Verwendung der Video-Steuerelemente normalerweise) zu jeder beliebigen Zeit gesteuert werden. Wenn die von mir hinzugefügten Ereignis-Listener ausgelöst werden, kann ich nicht feststellen, wer oder was die Quelle war (der Benutzer oder meine App).

Also im Grunde ich nicht wollen Ereignisse durch meine App ausgelöst hören, aber Ich auf Benutzeraktionen hören möchten (der Benutzer auf die Play-Taste angeklickt oder im Video seeked irgendwo auf, indem Sie auf der Fortschrittsbalken).

Mein aktueller Ansatz ist es, die Zuhörer zu entfernen und fügen Sie sie wieder danach wie folgt:

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

Es funktioniert gut, aber wenn ich dies tun, für die Suche nach, ist es schwieriger, eine gute Zeit für settimeout auszuwählen wegen Video-Pufferung (es scheint, als ob das Ereignis seeked ausgelöst wird, nachdem das Video die Pufferung abgeschlossen hat). Also erkunde ich verschiedene Methoden.

Ich weiß über den CustomEvent() - Konstruktor, aber ich bezweifle, dass ich das verwenden könnte, um tatsächlich zu spielen oder zu suchen. Ich muss ein Ereignis erstellen, das die entsprechenden Aktionen auslöst (spielen, pausieren oder suchen). Fühl mich frei, mich zu korrigieren, wenn ich falsch liege.

Alle anderen Ideen, die ich Ereignisse durch meine App und/oder den Benutzer ausgelöst erkennen konnte?

Answer 1

Sie können ein an ein Objekt anhängen, das an den Ereignishandler übergeben wird, um festzustellen, ob das Ereignis als Reaktion auf Benutzeraktionen oder Anwendungsaktionen ausgelöst wurde.

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>