组合两个语句后代码不起作用

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中返回的结果存储在{ {strong} addEventListener 没有返回类型的{1}}变量，因此会返回h1tag。

Answer 2

要扩展之前的答案，此处的关键问题是h1tag未定义（因为addEventListener没有返回值）并且您正在尝试更改它“＆＃39;的属性。

幸运的是，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"});