本記事ではJavaScriptのイベント処理について解説します。
フォームに入力した時やボタンをクリックしたときのみ、特定の関数が作業するように、JavaScriptではできます。
イベント処理ができてこそ、JavaScriptを使う意味があると言えますね。
今回はイベント処理の中でも代表的で良く使うものをまとめました。
イベント処理について知りたい方はこの機会にぜひ学んでください。
JavaScriptのイベントとは？
ブラウザ上に発生したアクションの総称をイベントと呼んでいます
たとえば、ボタンをクリックしたり、フォームを入力したり、といった動作ですね。
これらのイベントが起きたときにのみ、プログラムを動かすのがイベントハントラと呼ばれるものです。
イベントハントラをinputタグに指定することで、JavaScriptを動かすことが可能です。
以下に、JavaScriptのイベントハントラの中でも代表的なものをまとめました。
| イベントハントラ | 意味 |
| onclick | クリックされた時に動く |
| onchange | 書き込まれるなど変更が加わったときに動く |
| onkeypress | キーボードが押されたときに動く |
| onload | ページが読み込まれた時に動く |
| ondrag | ドラッグされた時に動く |
| onscroll | スクロールされた時に動く |
| onmouseover | マウスのカーソルが重なった時に動く |
イベント処理の書き方
イベント処理の具体的な書き方をみていきます。
ここでは、以下のイベントハントラの使い方を紹介しましょう。
- onclick
- onchange
onclick
onclickはボタンなどがクリックされた場合に動くイベントハントラです。
具体的なonclickの使い方をみていきましょう。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<input type="button" onclick="test_input()">
<script>
function test_input() {
document.write("ボタンが押されました。");
}
</script>
</script>
</body>
</html>
○実行結果(ボタンを押す前)
○実行結果(ボタンを押した後)
inputタグをみてください。
onclick=”test_input()”、とすることでボタンが押された時に、test_input関数を動かすことが可能です。
JavaScriptの関数について詳しく知りたい方は【入門編10】JavaScriptの関数やアロー関数について理解しようをお読みください。
test_input関数が動くことで「ボタンが押されました。」と表示がされます。
このようにinputタグにonclickを追加するだけで、ボタンが押された場合に処理を行うことが可能です。
onchange
onchangeはフォームの内容などが変更されたときに動くイベントハントラです。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<input type="text" onchange="test_input()">
<script>
function test_input() {
document.write("文字が入力されました。");
}
</script>
</body>
</html>
○実行結果(入力前)
○実行結果(入力後)
onchangeの使い方はonclickとだいたい一緒です。
テキストに文字が入力されると、test_input関数が動くようになっています。
イベントリスナーを使う
イベントハントラの記述方法を紹介してきました。
しかし、上記で解説したやり方には、複数の処理ができないという弱点があります。
複数の処理を記述すると、最後に書いた処理しか動かなくなってしまうのです。
そこで役に立つのがイベントリスナーです。
イベントリスナーを使えば、複数のイベントを記述することができます。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<input type="text" id="test">
<script>
var test = document.getElementById("test");
function test_input() {
document.write("文字が入力されました。");
}
test.addEventListener("change",test_input);
</script>
</body>
</html>
○実行結果(入力前)
○実行結果(入力後)
まずgetElementByIdによって、idがtestの部分を取り出し、test変数に格納しました。
そして、addEventListenerメソッドによって、test変数に格納した部分を処理しています。
addEventListenerは、第一引数にイベント内容(ここではonは付けないので注意です)、第二引数に関数名を指定します。
こうすることで、test変数の内容に変更が合った場合のみ、test_input関数を動かすことが可能です。
addEventListenerなら、何回処理があったとしても、指定した関数を動かせます。
まとめ
本記事ではイベント処理について解説しました。
イベント処理は利用頻度がかなり高いので、イベント処理の基礎を抑えておきましょう。
次回はJavaScriptの日付フォーマット、をみていきましょう。