[JavaScript]イベントリスナー登録

イベントリスナーとは

webページにおける「ボタンのクリック」や「キーの入力」などのユーザーの操作やページの読み込みなどを「イベント」という。イベントリスナーとは、そのイベントの発生を監視し、発生したイベントに対応して実行される処理（関数）のこと。
また、イベントが発生することを「イベントが発火する」ともいう。

イベントリスナー登録

対象要素（オブジェクト）にイベントリスナーをaddEventListener()を使って登録する。addEventListener()の書き方は以下のようになる。

<対象要素(オブジェクト)>.addEventListener(<イベントの種類>,<関数>,<イベント伝搬形式>)

【各引数について】
■ イベントの種類：
登録するイベント（'click'、'mousedown'など）を指定する。
イベントの種類については、MDNのイベント一覧を参照。（MDNのイベント一覧）
■ 関数：
イベントが発生したときに実行される処理を指定する。
■ イベントの伝搬形式：
イベントの伝搬形式をtrue/falseで指定できる。通常は、falseで省略することも可能。

また、対象要素（オブジェクト）を取得するためには、getElementById()を使用する。これは、引数に指定されたid属性の値に対応した要素のElementオブジェクトを返す。

document.getElementById(<id>)

実装

上記のことを使って、ボタンが押されたときにメッセージを表示するように実装すると以下となる。

HTML

<button id = "message"> メッセージ </button>

JavaScript

let button = document.getElementById("message");
button.addEventListener('click'()=>{
    alert("ボタンが押されました！");
});