我正在学习一些 DOM 事件，并尝试在 HTML 主体上使用“模糊”事件。
首先使用onblur
document.body.onblur = () => {
dosomething();
}
和 使用 AddEventListener
document.body.addEventListener("blur", ()=>{
dosomething();
})
但是，只有使用 onblur 才有效，那么为什么在这种情况下它不能与 addEventListener("blur") 一起使用呢？ 他们之间有什么区别吗？
在您描述的情况下，使用 onblur 有效而 addEventListener("blur") 不起作用的原因是因为模糊事件不会在 DOM 树中冒泡。
当您直接在 document.body.onblur 等元素上使用 onblur 时，您实际上是直接在该元素上设置一个属性来侦听模糊事件。这是有效的，因为模糊是一个非冒泡事件，这意味着它仅适用于元素本身。因此，当主体上发生模糊事件时，它会触发直接附加到其上的事件处理程序。
但是，当您使用 addEventListener("blur") 时，您正在设置一个事件侦听器来侦听模糊事件以在 DOM 树中冒泡。由于模糊不会冒泡，因此为其附加事件侦听器将无法在除直接受模糊事件影响的元素之外的元素上按预期工作。
所以，总结一下：
onblur 之所以有效，是因为它直接将事件处理程序附加到元素本身。 addEventListener("blur") 不起作用，因为 Blur 不会在 DOM 树中冒泡，而 addEventListener 会侦听冒泡的事件。 如果您需要捕获 body 上的模糊事件，直接在 document.body 上使用 onblur 是合适的方法。