为什么 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.prototype

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

在上面的代码中，处理程序既不是内联的，也不是通过调用 setter 附加的，因此访问元素的属性将返回 ，这不能被调用。onmouseovernull

在下部代码中，处理程序是内联的，因此它通过访问调用 getter 的属性来返回。onmouseover

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

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

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>