代碼不結合兩種說法

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"});