JavaScript初級講座

イベントとは「ボタンを押した」「キーボードのキーが押された」など、何か動きがあった時に実行したい処理を設定できる機能です。
それでは、以下のソースコードを見てみましょう。

<script type="text/javascript">
    function changeA() {
        document.getElementById("changeText").textContent = "A!!";
    }

    function changeB() {
        document.getElementById("changeText").textContent = "B!!";
    }
</script>
<div id="changeText" style="width:20px; padding:10px; border:1px solid #000;">
    ここが変わります！
</div>
<input type="button" value="Aにするボタン" onclick="changeA();"/>
<input type="button" value="Bにするボタン" onclick="changeB();"/>

「<input type="button" value="Aにするボタン" onclick="changeA();"/>」の「onclick="changeA();"」でイベントの設定をしています。
onclickはそのHTML要素がクリックされた時に発生するイベントです。
サンプルの例だと、「Aにするボタンがクリックされた時にchangeA();を呼び出す」設定になっています。

イベントがどういう機能なのか伝わったでしょうか？
他にも、onloadというイベントもよく使われるのでご紹介します。

window.onload = function() {
    console.log("ページの読み込みが完了しました。");
}

ページの読み込みが完了した時に発生するイベントです。
この中にJavaScriptを記述すると、ページの読み込みが完了した後に実行されるので、HTMLの読み込みが完了する前にJavaScriptが実行されてしまって、取得できるはずのHTML要素が取得できない現象を回避できます。
onloadはwindowオブジェクトのonloadプロパティに直接イベントを設定していますが、ボタンのサンプルも同じようにプロパティに直接イベントを設定する事ができます。

<script type="text/javascript">
    window.onload = function() {
        var btnA = document.getElementById("btnA");
        var btnB = document.getElementById("btnB");

        btnA.onclick = function() {
            document.getElementById("changeText").textContent = "A!!";
        }

        btnB.onclick = function() {
            document.getElementById("changeText").textContent = "B!!";
        }
    }
</script>
<div id="changeText" style="width:20px; padding:10px; border:1px solid #000;">
    ここが変わります！
</div>
<input id="btnA" type="button" value="Aにするボタン"/>
<input id="btnB" type="button" value="Bにするボタン"/>

HTML要素に属性としてイベントをセットする方法と、プロパティに設定する方法を紹介しました。
この方法でも問題は無いのですが、後から同じイベントを設定すると上書きされてしまいます。

<script type="text/javascript">
    window.onload = function() {
        var btnA = document.getElementById("btnA");
        var btnB = document.getElementById("btnB");

        btnA.onclick = function() {
            document.getElementById("changeText").textContent = "A!!";
        }

        btnB.onclick = function() {
            document.getElementById("changeText").textContent = "B!!";
        }
        
        // btnAにもう一度イベントを設定して、文字列を追加する。
        btnA.onclick = function() {
            var text = document.getElementById("changeText").textContent;
            document.getElementById("changeText").textContent = text + "後から設定したA!!";
        }
    }

    function changeB() {
        var message = "属性で設定したイベントは、プロパティで設定したイベントに上書きされる。";
        document.getElementById("changeText").textContent = message;
    }
</script>
<div id="changeText" style="width:20px; padding:10px; border:1px solid #000;">
    ここが変わります！
</div>
<input id="btnA" type="button" value="Aにするボタン"/>
// イベントを属性に設定します
<input id="btnB" type="button" value="Bにするボタン" onclick="changeB();"/>

addEventListenerを使えば、同じ要素に同じ種類のイベントいくつでも設定できます。

HTML要素.addEventListener("イベント", 実行したい処理);

先ほどのサンプルにaddEventListenerを使ってみましょう。

<script type="text/javascript">
    window.onload = function() {
        var btnA = document.getElementById("btnA");
        var btnB = document.getElementById("btnB");
        
        btnA.addEventListener("click", function() {
            document.getElementById("changeText").textContent = "A!!";
        });

        btnB.addEventListener("click", function() {
            document.getElementById("changeText").textContent = "B!!";
        });

        // btnAにもう一度イベントを設定して、文字列を追加する。
        btnA.addEventListener("click", function() {
            var text = document.getElementById("changeText").textContent;
            document.getElementById("changeText").textContent = text + "後から設定したA!!";
        });
    }

    function changeB() {
        var message = "属性で設定したイベントは、addEventListenerでも上書きされる。";
        var text = document.getElementById("changeText").textContent;
        document.getElementById("changeText").textContent = text + message;
    }
</script>
<div id="changeText" style="width:20px; padding:10px; border:1px solid #000;">
    ここが変わります！
</div>
<input id="btnA" type="button" value="Aにするボタン"/>
// イベントを属性に設定します
<input id="btnB" type="button" value="Bにするボタン" onclick="changeB();"/>

同じ要素の同じイベントを複数設定できる事が確認できたと思います。
残念ながら属性で設定したイベントはaddEventListenerでも上書きされてしまいますが。。。

以下は代表的なイベントの一覧です。
addEventListenerで使用する時は、イベント名の on を除いて使用します。