コードは二つの文

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あるので、他の言葉であなたが戻っ保存しようとしているので、文は、評価されていることです h1tag変数に addEventListenerの結果がありますが、 addEventListenerには戻り値の型がありません。 undefinedが返されます。

Answer 2

これまでの解説を拡張すると、h1tagは定義されていません（addEventListenerは値を返さないため）。そのプロパティを変更しようとしています。

幸いにも、javascriptは、イベント関数に渡された引数によって、イベントが呼び出された要素にアクセスする方法を提供します。

はh1tagが2番目の試みで定義されていません

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

Answer 3

を実行してみてください。

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

それでも要素への参照をKEPする場合：あなたはこれらの2行を結合したい場合は

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

Answer 4

、あなたはあなたのEventListenerにパラメータを追加し、マウスオーバーのターゲットを取得することができますイベント。こうすることで、h1tag変数を初期化しなくてもスタイルを変更することができます：

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