为什么 onmouseover() function 适用于属性 onmouseover=“javascript code” 但不适用于 addEventListener() function？

Question

我的意思是在 javascript 代码中触发onmouseover事件。 我在一个元素上使用了 function onmouseover() 。 但它在某些情况下不起作用。

这是一个演示代码：

HTML 文件：

<p id="p-id">Text Text</p>

外部 Javascript 文件：

var myP = document.getElementById("p-id");
myP.addEventListener("mouseover", function() {
    this.style.backgroundColor = "red";     
});
// trigger the mouseover:
myP.onmouseover(); // console error: onmouseover is not a function.

但是当我在元素上使用属性onmouseover="javascript code"时onmouseover() function 效果很好：

HTML 文件：

<p id="p-id" onmouseover="this.style.backgroundColor='red'">Text Text</p>

外部 Javascript 文件：

var myP = document.getElementById("p-id");
// trigger the mouseover:
myP.onmouseover(); // works well 

我一直在寻找原因，但我没有任何线索。

Answer 1

onmouseover属性是HTMLElement.prototype上的setter/getter ：

 var myP = document.getElementById("p-id"); const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'onmouseover'); console.log(descriptor); console.log(descriptor.get.call(myP));

 <p id="p-id" onmouseover="console.log('fn')">Text Text</p>

调用 getter 时，它将返回之前使用setter附加的处理程序，例如elm.onmouseover = someFn ，或者返回内联处理程序 function。

在您的上层代码中，处理程序既不是内联的，也不是通过调用设置器附加的，因此访问元素的onmouseover属性返回null ，无法调用。

在您的较低代码中，处理程序是inline ，因此它是通过访问调用 getter 的onmouseover属性返回的。

---

最好不要使用内联处理程序，因为它们有太多值得使用的问题，也不要通过.on属性附加处理程序（因为那样的话，如果另一个脚本试图将处理程序附加到同一个元素，它会覆盖较早的处理程序）。

如果要触发刚刚附加的监听器 function，可以先将 function 保存在变量中，然后调用它：

 var myP = document.getElementById("p-id"); const fn = () => myP.style.backgroundColor = "red"; myP.addEventListener("mouseover", fn); fn();

 <p id="p-id">Text Text</p>

或者通过 DOM 向元素分派一个事件：

 var myP = document.getElementById("p-id"); myP.addEventListener("mouseover", () => myP.style.backgroundColor = "red"); myP.dispatchEvent(new Event('mouseover'));

 <p id="p-id">Text Text</p>