イベント

イベント

イベントは、 「何かが行われたら、何か処理をする」という時に使います。

具体的には、次のような時にイベントを使います。
・ボタンが押されたらアラートを出す。
・マウスオーバーされた時に、テキストを変える。
・フォームの値を変更した時に入力値をチェックする。

「ボタンが押されたらアラートを出す」という例では、次のように考えることができます。

ボタンが.クリックされたら = アラートを出す;

上の処理を実際に作成してみましょう。

<!-- index.html -->
<body>
    <button id="btn">ボタン</button>
    <script src="js/main.js"></script>
</body>
// main.js
let btn = document.getElementById('btn');
//ボタンが.クリックされたら = アラートを出す
btn.onclick = function() {
    alert('ボタンがクリックされました');
}

JavaScriptがあらかじめ用意しているイベントで、onclick と書くように決まっているものです。
他にもいろいろなイベントが用意されているので、気になる方は実際に動きを確認してみてください。

イベント名 意味
onclick クリックされた時
ondblclick ダブルクリックされた時
onmouseover マウスが乗った時
onmouseout マウスが外れた時
onmousedown マウスのボタンを押した時（押した瞬間）
onmouseup マウスのボタンを離した時（離した瞬間）
onmousemove マウスを動かした時
onfocus フォーカスが当たった時
onblur フォーカスが外れた時
onchange formの値が変わった時
onsubmit formを送信する時

イベント設定の欠点

この方法でイベントを設定するのは簡単ですが、一つ欠点があります。
それは、 一つの要素に同じ種類のイベントは一つしか設定できない という点です。

次の例をみてください。

<!-- index.html -->
<body>
    <div id="box">BOX</div>
    <button id="btn">ボタン</button>
    <script src="js/main.js"></script>
</body>
// main.js
//box要素とbtn要素を取得
let box = document.getElementById('box');
let btn = document.getElementById('btn');
//ボタンがクリックされたら
btn.onclick = function() {
    box.style.backgroundColor = 'red';
};
//ボタンがクリックされたら
btn.onclick = function() {
    alert('ボタンが押されました');
};

ボタンが押された時に 「box要素の背景色を赤にする」 イベントと 「アラートを出す」 イベントの2つを設定しました。
しかし、起動するイベントはアラートが表示される方だけです。

その理由は btnに対してイベントは一つだけしか設定できないからです。
後に書いた方が優先されるので、最初の背景色を変える方は消されてしましました。

しかし、どうしてもこのようにボタンが押された時にアラートも表示して、背景色も変化させたいという場合は別の方法があります。

addEventListener

addEventListenerを使用すると、同じ要素（今回だと btn ）に同じ種類のイベント（今回だと onclick）をいくつでも設定することができます。

addEventListenerの基本は以下のような形です。

要素.addEventListener(何かが起きたら, 何かをする, false);

とりあえず、最後はfalseと書いておくとしてください。
では、先ほどの「ボタンがクリックされた時に、背景色を赤くしてアラートを出す」という2つのイベントを含む処理を書いてみます。

// main.js
let box = document.getElementById('box');
let btn = document.getElementById('btn');
//ボタンが押されたら、背景色を赤にする
btn.addEventListener('click', function() {
    box.style.backgroundColor = 'red';
}, false);
//ボタンが押されたら、アラートを出す
btn.addEventListener('click', function() {
    alert('ボタンが押されました');
}, false);

先ほど紹介した色々なイベントには全て「on」がついていましたが、addEventListener では「on」の接頭辞は必要なくなります。
そのため、 onclick から click になっていることに注意してください。

このaddEventListenerですが、一つ欠点を挙げるとすると Internet Explorerのバージョン8以下では対応していないので注意が必要です。
Internet Explorerの場合は、addEventListenerではなく attachEventという関数を使用します。
ブラウザによって処理を使い分ける必要があるので、これに対応するためにプログラムが複雑になる可能性があるというデメリットがあります。

（ちなみに、 jQueryを使うと2つの良い部分を合わせたイベント処理が可能になります）

課題

理解度チェック
JavaScript→2-3というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。
（この問題は、ファイルを一つにするために、HTMLの中でCSSとJavaScriptを読み込む書き方をしています。以下のコードをコピーして問題を解いてください。）

問1：ボタンを押したら、「大吉」「中吉」「凶」と文字が変わるようなおみくじを作成してください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn {
            height: 100px;
            width: 100px;
            background-color: red;
            border-radius: 50%;
            color: white;
            text-align: center;
            line-height: 100px;
            cursor: pointer;;
            font-weight: bold;
            user-select: none;
        }
        #btn:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div id="btn">クリック</div>
    <script>
    //btnを取得
    const btn = document.getElementById('btn');

    // ボタンがクリックされたら、という処理の始まり
    btn.addEventListener('click', function() {
        //①配列で「大吉」「中吉」「凶」を準備
        
        //②乱数を発生させて、その値を取得
        
        //③取得した **btn** の「クリック」という文字を配列の中身の文字にランダムに変化させる
        
    }, false);
    </script>
</body>
</html>

【ヒント】
②乱数を発生させて、その値を取得：
乱数の範囲は「配列の個数分」まで、なので3です。何のために1〜3の乱数を使うかというと、例えば results[0] には「大吉」が入っています。
今回は「resultsの何番目か」という添字（インデックス）の部分をランダムにすることで、配列の中身をランダムに出せるようにしています。

③取得した btn の「クリック」という文字を配列の中身の文字にランダムに変化させる：
例えば、次のように書けば、ボタンの中身は「大吉」になります。②で取得した値をうまく活用してみてください。

btn.textContent = results[0];

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami