为什么 onmouseover（） 函数与属性 onmouseover

Question

我的观点是在javascript代码中触发事件。我在一个元素上使用了这个函数。但它在某些情况下不起作用。onmouseoveronmouseover()

这是一个演示代码：

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()onmouseover="javascript code"

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

该属性是以下位置的 setter/getter：onmouseoverHTMLElement.prototypevar 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在上面的代码中，处理程序既不是内联的，也不是通过调用 setter 附加的，因此访问元素的属性将返回 ，这不能被调用。onmouseovernull在下部代码中，处理程序是内联的，因此它通过访问调用 getter 的属性来返回。onmouseover最好永远不要使用内联处理程序，它们有太多的问题不值得使用，并且也不要通过属性附加处理程序（因为这样，如果另一个脚本尝试将处理程序附加到同一元素，它将覆盖早期的处理程序）。.on如果要触发刚刚附加的侦听器函数，可以先将该函数保存在变量中，然后调用它：var myP = document.getElementById("p-id");const fn = () => myP.style.backgroundColor = "red";&nbsp; &nbsp; &nbsp;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>