JS：イベント処理について

JavaScriptを使うとブラウザ上の様々なイベント処理に対応したプログラムを作成できます。
新旧イベント処理の記述、無名関数による呼び出し、関数呼び出しそれぞれサンプルコードで示します。

新旧イベント処理の書き方
1. イベントリスナ―登録による方法
2. イベントプロパティによる方法
サンプルコード
1. 無名関数で実行する
2. イベント処理に定義した関数を指定する
イベントリスナーの第3引数について

新旧イベント処理の書き方

JavaScriptは歴史があるので、まずは新旧両方の書き方を紹介しておきます。

イベントリスナ―登録による方法

一般に用いられる書き方はこちらです。
イベントリスナーによるイベント登録と呼ばれます。

以下はホームページが読み込まれた時（起動時）に処理を行う記述例です。

window.addEventListener("load", function(){
	// 起動時の処理を記述
});

対象となるオブジェクト（上記例ではwindow）にaddEventListenerで登録する方法です。
上記の例ではイベント名に load を指定しています。

addEventListener( イベント名, 実行したい関数　又は　無名関数）;

後述する旧い形式の書き方に比べてのメリットは、同じHTMLエレメントに複数のイベント処理を登録できる点にあります。

例えば同じ1つのイベントに対して別々に記述した処理を同時に実行することができます。

例）起動時にどちらも実行される

// 処理1
window.addEventListener("load", function(){
	console.log("loadイベント発生！");
});

// 処理2
window.addEventListener("load", function(){
	alert("loadイベント発生！");
});

イベントの種類は、reload, resize, click, mousedown, keyup…などなど沢山あります。

イベントの種類は、ウインドウやボタンなど対象となるオブジェクトによっても異なりますが、膨大なため以下で参照してみてください。

イベントリファレンス | MDN

イベントは、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化 (バッテリー残量の低...

イベントプロパティによる方法

こちらは旧い記述形式なので憶える必要はありませんが、一応見かけることもあるので書いておきます。

window.onload = function(){
	// 起動時の処理を記述
};

onclick, onmousedown, onkeyup…という形でイベント名の先頭がon～で始まる記述になります。
この方法は現在ではあまり見かけなくなりました。

デメリットがあって、先述したイベントリスナーのように同じイベントに対して複数の処理を記述できない点です。

これは出来ない！

// 処理1
window.onload = function(){
	console.log("起動したよ！");
};

// 処理2
window.onload = function(){
	alert("起動したよ！");
};

サンプルコード

無名関数で実行する

ちょっとした短い処理なら無名関数を使ってイベント処理を実行するのが便利です。

以下はボタンを押した時（clickイベント）にアラートを表示する例です。

buttonClick.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>無名関数の例（ボタンクリック）</title>
</head>
<body>
    <p><input id="btn1" type="button" value="押して!"></p>
    <script>
        // DOM取得
        let btn1 = document.getElementById("btn1");

        // 無名関数でのイベント処理登録
        btn1.addEventListener("click", function(){
            alert("ボタンが押されました！");
        });
    </script>
</body>
</html>

無名関数は以下の青部分です。

btn1.addEventListener("click", function(){
    alert("ボタンが押されました！");
});

functionを記述せず ()=> のアロー関数式を使って書いても同じ無名関数の意味になります。

btn1.addEventListener("click", ()=>{
    alert("ボタンが押されました！");
});

これは比較的新しい記述方法です。詳しくは以下のドキュメントを参照してください。

アロー関数式 - JavaScript | MDN

アロー関数式は、従来の関数式の簡潔な代替構文ですが、意味的な違いや意図的な使用上の制限もあります。

まあどちらでもいいので、好きな方で書いてください。

イベント処理に定義した関数を指定する

少し処理が込み入って何行にも渡るようなら、無名関数ではなく関数を定義してイベントリスナーから呼び出す方法がベストです。

処理内容は先ほどと同じです。
イベントリスナーから事前に定義した関数を呼び出す例です。

buttonClickFunction.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>関数呼び出しの例（ボタンクリック）</title>
</head>
<body>
    <p><input id="btn1" type="button" value="押して!"></p>
    <script>
        // 関数定義
        function buttonEventFunction(){
            alert("ボタンが押されました！");
        }

        // DOM取得
        let btn1 = document.getElementById("btn1");

        // イベント登録
        btn1.addEventListener("click", buttonEventFunction);

    </script>
</body>
</html>

function buttonEventFunction(){} で定義した関数を以下のようにして呼び出しています。

btn1.addEventListener("click", buttonEventFunction);

第2引数に実行した処理を記述した関数名のみ記述します。関数名の後ろに ( ) はつけません。

イベントリスナーの第3引数について

ここまで省略してきましたが、addEventListenerによるイベント登録には第3引数もあります。

記述例

btn1.addEventListener("click", function(){
    alert("ボタンが押されました！");
}, false );

第3引数は、true または false で指定します。

ブラウザによりデフォルト値が違うため、できるだけ記述する方が良いです。
大抵はfalseで問題ないかと思います。

動作の違い

true	イベント対象オブジェクトの外側のHTMLエレメントに設定したイベントが優先される。例）divタグの内側にinputタグがあって、divタグとinputタグそれぞれにclickイベント登録されていたなら、divタグに設定したclickイベントのみが実行される
false	対象オブジェクトに指定したイベントが実行される。上記のように外側のHTMLエレメントとイベント動作がかぶってもどちらのイベント処理も実行される。

関数呼び出しを例にとると以下のようにすればベストでしょう。

buttonClickFunction2.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>関数呼び出しの例（ボタンクリック）</title>
</head>
<body>
    <p><input id="btn1" type="button" value="押して!"></p>
    <script>
        // 関数定義
        function buttonEventFunction(){
            alert("ボタンが押されました！");
        }

        // DOM取得
        let btn1 = document.getElementById("btn1");

        // イベント登録
        btn1.addEventListener("click", buttonEventFunction, false);

    </script>
</body>
</html>

以上、JavaScript：イベント処理の書き方でした。