JavaScriptのイベント - konakona-engineers diary

・JavaScriptにおけるイベントとは？

・イベント発火の種類

・addEventListener の使い方

JavaScriptにおけるイベントとは？

一言でいうと、HTMLに対して行われた処理の要求のこと。

例えば次のようなことが挙げられる。

・ユーザーが要素の上にマウスカーソルを乗せた

・ユーザーがブラウザ上のボタンをクリックした

・テキストフィールドでキー入力をした

そして、これらのイベントを認識してJavaScriptのコードが動き出すことを

「イベント発火」といいます。

イベント発火の種類

イベント発火は種類が豊富ですが、代表的なものとして以下のようなことが挙げられる

■loadイベント・・・ページ全体が全て読み込まれた後に、イベント発火する

■clickイベント・・・指定された要素がクリックされた時に、イベント発火する

■mouseoverイベント・・・マウスカーソルが指定された要素上に乗った時に、イベントが発火する

■mouseoutイベント・・・マウスカーソルが指定された要素上から外れた時に、イベントが発火する

その他、イベントの種類については以下を参照してください。

qiita.com

※また、イベントを発火させるためには「　addEventListener 」というメソッドを使う必要があります。

addEventListener の使い方

addEvevtListenerは以下のように使用する

例

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

実例

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

  const pullDownButton = document.getElementById("lists")

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

解説

１行目で、windowオブジェクトにaddEventListenerメソッドを使いイベント発火を宣言

その内容は、イベントの種類「　load　」なので、ページ全体が読み込まれた後にイベント発火するようにしている。

functionで関数を定義し、３行目で「　pullDownButton　」変数を定義。

代入する値は、ドキュメントオブジェクトのID”lists”

５行目で、宣言した「　pullDownButton　」に「　addEventListenerメソッド　」を使い２つ目のイベント発火を宣言している。内容は、マウスカーソルが指定した要素に乗った時に、コンソールに「　mouseover OK　」を表示させると言うもの。