マウスカーソルが要素の上に乗った時にイベント発火させる

　JavaScriptのコードを書く前に...

　JavaScriptファイルを読み込ませる記述をする

HTMLファイルにCSSファイルを読み込ませる記述をすように、JavaScriptのファイルを読み込ませる記述をする必要がある。そこで使うのが　script要素　である。

　script要素

HTMLファイルにJavaScriptファイルを読み込むために使われるHTMLの要素。head要素内に記述する。

【書き方】

　<script src="JavaScriptのファイル名"></script>

　JavaScriptのコードを実行させる

　イベント

　JavaScriptは「何かが起きたらコードを実行する」という概念に基づいて設計されている。この「何かが起きたら」の例としては、 「ボタンがクリックされたら」 や 「要素の上にマウスカーソルを乗せたら」 などが挙げられる。これらのアクションことを　イベント　といい、イベントが動き出すことを　イベント発火　という。

　イベント発火させる手順

1. 取得したいHTMLの要素にidを追記

HTMLファイルに記述

<div id="id名"></div>

2. ページの読み込み後にJavaScriptのコードが実行されるようにする

JavaScriptファイルに記述

今後のコードは、この中に記述する。
load はイベント名でこれを指定することで、ページ全体が全て読み込まれた後にイベントを発火させることができる。
（この記述をしないとJavaScriptのコードの方がbody要素内のHTMLコードより先に読み込まれて、nullと表示されてしまう。）

window.addEventListener('load', function(){

})

3. getElementById　を使ってidが付与されている要素を取得し、変数に定義

JavaScriptファイルに記述

const 変数 = document.getElementById("id名")

4.　addEventListenerメソッド　を使ってイベント発火時に実行される関数を定義

JavaScriptファイルに記述

【addEventListenerメソッドの書き方】

第1引数で、どのようなイベントに対応するものなのか指定
第2引数で、指定したイベントが発生した時に関数内に書かれた処理を実行できる

要素.addEventListener('イベント名', 関数)

【 補足 】
Q.　getElementByIdメソッドってなに？
➟DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つ

Q.　DOMツリーってなに？
➟DOMによって作成された階層構造のあるHTMLのデータ

【 例題 】　マウスカーソルが要素の上に乗った時にイベント発火させる

window.addEventListener('load', function(){

  const pullDownButton = document.getElementById("lists")

  pullDownButton.addEventListener('mouseover', function(){
    console.log("mouseover OK")
  })
})