是否可以确定事件是否以编程方式触发？

Question

是否可以确定 input、blur、change 等事件是由于用户交互而触发的，还是使用 [= 以编程方式触发的15=]等?

我面临的问题是第三方 UI 库注册了一个事件处理程序，用于侦听 blur 并在输入元素为空时更改其外观。我有一个自己的 blur 处理程序，如果满足某些条件，该处理程序会清空输入。由于我的事件处理程序是在库的事件处理程序之后执行的，因此库不会注意到输入现在为空，重新抛出模糊事件会导致无限循环。

或者向事件添加自定义属性是否安全，例如...

document.getElementById('input').addEventListener('blur', event => {
  if (event.myOwnCustomProperty !== true) {
    event.target.value = ''
    const customEvent = new Event('blur')
    customEvent.myOwnCustomProperty = true
    event.target.dispatchEvent(customEvent)
  }
})

<input id="input">

Answer 1

您可以使用事件的 isTrusted 属性来检查它是否由用户交互触发：

The isTrusted read-only property of the Event interface is a Boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent().

document.getElementById('input').addEventListener('blur', event => {
  if (event.isTrusted) {
    ...
  }
})

请注意，用户仍然可以手动或以编程方式从调试器触发事件，在这种情况下，您永远不会知道事件的来源。

是否可以确定事件是否以编程方式触发？

Is it possible to determine if an event was triggered programmatically?

javascript

dom-events