HTML属性是否存在对应的JS事件？相关事件类型及触发时机是什么

结论 #

虽然Attr接口确实按照DOM规范继承自EventTarget，也因此拥有所有*EventListener相关方法，但当前没有任何W3C标准定义的原生事件会在Attr实例上触发，这些继承来的事件方法目前仅对自定义事件生效，浏览器原生逻辑不会主动向Attr实例派发任何事件。

相关补充说明

• 历史上DOM 3级事件规范曾经定义过DOMAttrModified突变事件，不过这个事件是直接触发在属性所属的Element元素上，而非Attr实例本身，且这类旧突变事件由于性能问题早已被废弃，所有现代浏览器都已停止支持。
• 如果你需要监听DOM属性的变化，当前标准的实现方案是使用MutationObserver，在实例化时配置attributes: true即可监听指定元素上所有属性的新增、修改、删除操作，回调参数中可以直接获取到变化的属性名称、新旧值等信息，示例代码如下：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes') {
      console.log(`属性${mutation.attributeName}发生变化，旧值为${mutation.oldValue}`)
    }
  })
})
// 监听targetNode的所有属性变化，同时记录旧值
observer.observe(targetNode, { attributes: true, attributeOldValue: true })

• 规范中将Attr设计为继承EventTarget属于预留未来扩展的设计，目前并没有对应的原生事件场景，你如果手动给Attr实例绑定事件监听器，只有自己手动调用dispatchEvent派发自定义事件时才会触发监听回调，不属于浏览器原生行为。

内容的提问来源于stack exchange，提问作者asdru