【初級編8】JavaScriptのイベント処理の作り方を理解しよう

JavaScript入門

本記事では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の日付フォーマット、をみていきましょう。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
無料でスキルを学んでからIT業界に転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてIT業界に転職したいなぁ。でも、業界未経験だから、なんか敷居が高そう、と思っている方へ。

これからIT業界への転身を目指すあなたに、無料でスキルアップできて、平均で年収は90万円もアップできるんです。

JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

タイトルとURLをコピーしました