イベント
イベントは、 「何かが行われたら、何か処理をする」という時に使います。
具体的には、次のような時にイベントを使います。
・ボタンが押されたらアラートを出す。
・マウスオーバーされた時に、テキストを変える。
・フォームの値を変更した時に入力値をチェックする。
「ボタンが押されたらアラートを出す」という例では、次のように考えることができます。
ボタンが.クリックされたら = アラートを出す;
上の処理を実際に作成してみましょう。
<!-- 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];