3. イベント

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

<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 を除いて使用します。

イベント名
説明
onload
ページの読み込みが終わった時に発生します。
onresize
ウィンドウの幅が変化した時に発生します。
onclick
クリックされた時に発生します。
ondblclick
ダブルクリックされた時に発生します。
onmouseover
マウスカーソルが乗った時に発生します。
onmouseout
マウスカーソルが外れた時に発生します。
onmousedown
マウスのボタンが押された時に発生します。
onmouseup
マウスのボタンが押された状態から戻った時に発生します。
onmousemove
マウスカーソルが移動した時に発生します。
onkeydown
キーボードのキーが押された時に発生します。
onkeyup
キーボードのキーが押された状態から戻った時に発生します。
onfocus
フォーカスが当たった時に発生します。
onblur
フォーカスが外れた時に発生します。
onchange
フォームの値が変わった時に発生します。
onsubmit
フォームが送信される時に発生します。

This software includes the work that is distributed in the Apache License 2.0

Last modified: Thursday, 10 May 2018, 5:26 PM