代码不结合两种说法

Question

后工作

这是原代码：

h1tag= document.getElementById("myHeading");  
h1tag.addEventListener("mouseover",()=>{h1tag.style.backgroundColor="blue"}); 

合并后：

h1tag= document.getElementById("myHeading").addEventListener("mouseover",()=>{h1tag.style.backgroundColor="blue"}); 

这背后的原因是什么？

Answer 1

这一行的问题：

h1tag= document.getElementById("myHeading").addEventListener("mouseover",()=>{h1tag.style.backgroundColor="blue"}); 

是，该声明被评估由左到右，这样就被称为最后一个方法是addEventListener，所以换句话说，你想存储返回addEventListener在您的h1tag变量中产生，而addEventListener没有返回类型，因此它将返回undefined。

Answer 2

为了扩大以前的答案，这里的关键问题是没有定义h1tag（因为addEventListener没有返回值），并且您试图更改它的属性。

幸运的是，javascript提供了一种通过传递给事件函数的参数来访问调用事件的元素的方法。

尝试运行

document.getElementsById("myHeading") 
.addEventListener("mouseover", (e)=>{e.target.style.backgroundColor = "blue"}) 

Answer 3

h1tag未在第二次尝试中定义。

document.getElementById("myHeading").addEventListener("mouseover", (e)=>{e.currentTarget.style.backgroundColor="blue"}); 

如果你仍然想白马的元素的引用：

(h1tag=document.getElementById("myHeading")).addEventListener("mouseover", (e)=>{e.currentTarget.style.backgroundColor="blue"}); 

Answer 4

如果你想这两条线相结合，可以将参数添加到您的事件监听和检索鼠标悬停的目标事件。这样，您就可以更改其样式，而无需初始化h1标签变量：

document.getElementById("myHeading").addEventListener("mouseover", (event)=>{event.target.style.backgroundColor="blue"});