JavaScript-您能否检测到用户或应用触发了事件？

Question

我知道使用MouseEvent构造函数进行鼠标事件是可能的。

例如，使用MouseEvent构造函数，您可以轻松模拟鼠标单击。 通过这种方法，我可以向“假”鼠标事件中添加其他字段，例如

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

这使我能够在侦听器中检测此事件是否由用户或应用触发。

当播放/暂停/搜索html视频时，我想对它做类似的事情。 可以在任何给定时间通过我的应用（调用video.play() ， video.pause()或设置video.currentTime = x ）或用户（正常使用视频控件）控制视频。 当我添加的事件侦听器被解雇时，我无法知道源（用户或我的应用程序）的来源或来源。

因此，基本上， 我不想听我的应用程序触发的事件，但是我想听用户的操作（用户单击播放按钮或通过单击进度栏上的某个位置在视频中进行搜索）。

我当前的方法是删除侦听器，然后将其添加回去，如下所示：

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

它工作正常，但是我这样做的途径，以求时，是很难选择一个好时机settimeout因为视频缓冲（这似乎是seeked后视频缓冲完毕触发事件）。 因此，我正在探索不同的方法。

我知道CustomEvent（）构造函数，但是我怀疑我可以用它实际播放或搜索。 我需要创建一个事件，该事件将触发相应的操作（播放，暂停或搜索）。 如果我错了，请随时纠正我。

我还有其他可以检测到由我的应用程序和/或用户触发的事件的想法吗？

Answer 1

您可以将Boolean附加到传递给事件处理程序的对象，以确定是否响应用户操作或应用程序操作调度了事件。

 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>