JavaScriptのイベント処理の書き方【3つの手順／無名関数】

JavaScriptのイベント処理について知りたい
querySelector、addEventListenerがよくわからない
無名関数ってなんだ？基礎から使い方まで知っておきたい

この記事はそんな方へ向けて書いています。

この記事でわかること

JavaScriptのイベント処理の書き方【3つの手順】
querySelector、addEventListenerの使い方
無名関数の使い方、書き方の例文

本記事の信頼性

2021年6月からWebデザインの職業訓練校で学んでいます（6ヶ月コース）
使用テキスト：「HTML&CSS、JavaScriptのきほんのきほん」
ブログ歴：2019年1月にWordPressで開設（月間最高62,000PV、52,000円）

JavaScriptをそこそこ順調に学習してきました。
しかし、querySelector、addEventListenerあたりから理解のスピードが遅くなりました。

「やはりJavaScriptには、ついていけないのかな」と思うほど。

本記事では、同じ気持ちの方向けにJavaScriptのイベントについて基礎から解説していきます。
この記事を読むことで、JavaScriptのイベント処理（querySelector、addEventListener）、無名関数について理解できます。

職業訓練校やテキスト、わかりやすい「スラスラ読める JavaScriptふりがなプログラミング」から学んだことを網羅的にまとめました。

Contents

JavaScriptのイベント処理の書き方【3つの手順】
JavaScriptの無名関数の使い方【addEventListenerに入れる】
まとめ：JavaScriptのイベント処理の書き方は難しい

JavaScriptのイベント処理の書き方【3つの手順】

イベントに反応するプログラムをつくります。

イベントとは

イベント＝ユーザーの動作のタイミングに合わせて、処理を実行させること。

ユーザーの動作とは、たとえば以下など。

ボタンをクリック
フォームに入力する
マウスカーソルを動かした

ユーザーが何かしらの動作を行なったときにプログラムを動かすことを「イベントドリブン」といいます。

〇〇したら、XXをする。
例：ボタンをクリックしたら、YYをする。

「XXをする」の部分は、関数で指定します。
この関数は「リスナー関数」や「イベントリスナー」と呼ばれています。

ユーザーの動きを見つつ（Listener）、実行したタイミングで関数を呼び出すからですね。

イベント実行までの手順3つ

手順①：関数の定義
手順②：HTMLの取得
手順③：イベントのセット

手順①：関数の定義

イベントが発生したときに、実行したい内容を関数で定義します。

const btn_click = ( ) => {
　console.log('ボタンがクリックされました');
}

手順②：HTMLの取得

HTMLを操作するには、対象となる要素を選ぶ必要があります。
そのために使うのが、querySelectorメソッド。

イベントを発生させる元のHTMlを取得し、querySelectorメソッドで変数に格納します。

let　変数　＝　document．querySelector（ ' 文字列 ' ）

HTMLの読み込みの順番に注意します。

もしイベントを発生させる元のHTMLの読み込み前に、javascriptを実行すると動かなくなるからです。
HTMLの読み込み後に処理が実行されるように、scriptを制御する必要があるのです。

書き方例が、以下です。

let btn = document.querySelector('#btn');

documentファイル全体にquerySelectorを実行します（詳しくは後述）。

手順③：イベントのセット

イベントと対応する関数をつなげるには、addEventListenerメソッドを使います。

変数．addEventListener（ ' イベントタイプ ' , 関数）;

たとえば、以下です。

btn.addEventListener('click', btn_click);

HTMLが格納された変数btnに、イベントをセットします。

関数については引数なしで書く「無名関数」の書き方もできます（詳しくは後述）。

querySelector()とは

querySelector()は、JavaScriptから任意のHTML要素を検出・取得できるメソッドです。

querySelector()を使うとid属性・class属性などを気にせずjQuery感覚でHTML要素をセレクタ指定できます。
「querySelector()」だけであらゆるHTML要素を取得できるのです。

querySelectorの書き方

let　変数　＝　document．querySelector（ ' 文字列 ' ）

addEventListenerとは【使い方と、主なイベント一覧】

「addEventListener」メソッドは、ユーザーの操作（=Event）の監視役（Listener）を定義します。

ブラウザ上では、クリックやマウスホバー、キーボード入力などさまざまなイベントが発生。
addEventListenerで、イベントリスナー（イベントに合わせて実行する関数）を追加することで、発生イベントに応じて指定した関数を実行できます。

たとえば、以下など。

送信前にアラートを出す
ボタンクリックで言葉をポップアップ
キーボード入力のたびにフォーム内容を確認

addEventListenerの書き方

要素．addEventListener（イベントの種類, 処理）;

主なイベントの種類の一覧

click	クリックした
dbclick	ダブルクリックした
keydown	キーボードが押された
keypress	キーボードが押し続けられている
keyup	キーボードが押された状態から放された
mouseenter	マウスカーソルが要素に触れた
mouseover	マウスカーソルが要素に触れ続けている
mousemove	マウスカーソルが動いた
mousedown	マウスボタンをクリックした
mouseup	マウスのボタンを放した

上記以外にも、さまざまなイベントがあります。
» 参考：MDN | イベントリファレンス

イベント処理の書き方【例：おみくじ】

const btn = document.querySelector('#btn');
btn.addEventListener('click', btn_click);

</script>

【解説】
関数btn_clickを定義。
大吉、吉、凶、大凶を変数omikuzi_arrに格納。
Math.floorは小数点以下を切り捨てる。
Math.random()は、0〜0.9999...（1未満）の間から、1つの数値をランダムで返す（0は含む、1は含まない）。
0〜3までの4つの数字がランダムで出るようにする（4をomikuzi_arr.lengthに書き換えても可）
ここまでが関数定義です。

id＝btnのボタン要素を変数btnに代入。
documentファイル全体からbtnを抜き出せ → 変数btnに入れる。
#btnはid btnのこと。
btnにイベントとリスナー関数を設定。
clickしたら、関数btn_clickを実行。

JavaScriptの無名関数の使い方【addEventListenerに入れる】

無名関数とは【書き方】

名前のついていない関数のこと（別名：匿名関数）。

1度しか使わない関数を、直接処理の中に指定できます。
addEventListenerに、直接、関数（functionやアロー関数）を書いて、処理をまとめられるのです。

無名関数の書き方

【functionを使った書き方】

要素．addEventListner（ ' click ' , function( ){
　ここに処理を記述する
} ）;

【アロー関数を使った書き方】

要素．addEventListner（ ' click ' , ( ) = > {
　ここに処理を記述する
} ）;

無名関数のメリットとデメリット

メリット：関数を定義せずに記述できるのでラク
デメリット：関数に名前をつけられないので使い回せない

基本的な記述例

「ブラウザのボタンをクリックしたら、そのままブラウザに『クリックされた』という文字を出力したい」のHTMLの記述例を書いていきます。

　let btn = document.querySelector('#btn');

　btn.addEventListener( ' click ' , ( ) => {
　　let html = document.createElement('p');
　　html.innerHTML = 'クリックされた';

　　let target = document.querySelector('#content');
　　target.appendChild(html);
});

</script>

【解説】
HTMLに要素を追加するときは、まず変数にdocument.createElement（タグ名）で要素を作成します。
ここではタグ名＝pタグで「pタグ要素をつくる」という意味です。
その後「変数.innerHTML」で内容を記述します。
変数を出力したい場所のHTMLで取得し（ここではボタンタグの直下）、appendChild( )で出力します。

整理します。

querySelector( )メソッドで#btn（ボタンのidセレクタ）を見つけ、変数btnに格納
イベントセットのために「変数btn要素がクリックされたらどう処理するか」を書く
createElement( )メソッドで pタグ要素を作る
innerHTML( )メソッドで 'クリックされた'を追加
querySelector( )メソッドで#content（div タグのidセレクタ）を見つけ、変数targetに格納
appendChild( )メソッドで変数target（#contentの場所）に変数html要素（pタグの 'クリックされた'）を出力

innerHTMLとは、HTML要素の中身を変えられる機能です。

innerHTML → オブジェクト内のHTML
innerText → オブジェクト内の文字列のみ

難しいですが、コツコツ取り組んでいきましょう。

応用的な記述例

「ブラウザのボタンをクリックしたら、そのままブラウザに『クリックした時点の西暦、日時、秒、曜日』を出力したい」のHTMLの記述例を書いていきます。

　　btn.addEventListener('click', () => {
　　　let p_elem = document.createElement('p');

　　　const week = ['日', '月', '火', '水', '木', '金', '土'];
　　　const today = new Date();
　　　const year = today.getFullYear();
　　　const month = today.getMonth(); 1; //getMonthは0スタート
　　　const date = today.getDate();
　　　const day = today.getDay();
　　　const hours = today.getHours();
　　　const minutes = today.getMinutes();
　　　const seconds = today.getSeconds();

　　　p_elem.innerHTML = year + '年' + month + '月' + date + '日(' + week[day] + ')' + hours + '時' + minutes + '分' + seconds + '秒';
　　　let target = document.querySelector('#content');
　　　target.appendChild(p_elem);
　　　});
</script>

【解説】
id＝btnのボタン要素を変数btnに代入。
btnにイベントとリスナー関数を設定。
リスナー関数は、あらかじめ定義するのではなく、無名関数で指定。
追加されるp要素をcreateElementで作成し、作った要素に文字を書く。
何年何月何日何曜日、何時何分何秒にクリックされたかの出力要素を作る。
要素を追加したい場所のHTMLをquerySelectorで取得。
要素を追加したい場所に、追加したい要素をappendChildで出力。
appendChildは「子要素を追加する」という意味。