【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ!

今回は、JavaScriptにおけるイベント処理についてのプログラミングについて学習をしていきましょう!

「そもそもイベント、イベントハンドラって何?」
「イベント処理の作り方を知りたい」
「ボタンにイベント処理を追加したい」

このような内容も含めて、本記事では以下のような構成で解説していきます!

【基礎】「イベント」とは?
【基礎】「イベントハンドラ」の使い方
【実践】ボタンイベントの作り方

この記事で、イベント処理をしっかり学習してスキルアップを目指していきましょう!

目次

イベントとは

みなさんは「イベント」とは何かわかりますか?

JavaScriptにおける「イベント」とは、ウェブページ上で発生するあらゆるアクションの総称です。

例えば、ボタンのクリックフォームへの入力ページの読み込みマウスポインタを要素の上に合わせるなど、様々な出来事がページ上で発生します。

イベントハンドラとは

「イベント」「イベントハンドラ」の違いは何でしょうか?

ハンドラとは英語のhandlerであり動詞handle(扱う)から由来しています。

実際、様々なイベントの発生時に処理を行うことが出来ます。

例えば、ボタンがクリックされた際にアラートを表示させる、ページが読み込まれた際に何かを表示させる、など様々な処理が考えられますよね。

このようなイベントの処理を行うのが「イベントハンドラ」の役目です。

ちなみに「on」キーワードの隣にイベント名をくっつけたものがイベントハンドラのネーミングパターンとなっています。

イベントハンドラの一覧

では、イベントハンドラが何か学んだところで、主要なイベントとそのイベントハンドラをリストアップしてみました。

イベント名 イベントハンドラ名 説明
click  onclick  要素がクリックされた時
change  onchange  要素の内容が変更された時
 keypress  onkeypress  キーボードのキーを押した時
 load  onload  ページが読み込まれた時
 mouseover  onmouseover  要素にマウスのカーソルが重なった時
 select  onselect  テキストなどを選択した時
 dblclick  ondblclick  要素がダブルクリックされた時
 drag  ondrag  要素がドラッグされた時
 scroll  onscroll  スクロールバーがスクロールされた時

上の表にまとめイベントハンドラはどれも様々なシチュエーションに使えるので、ぜひ覚えておきたいものばかりです。

イベントハンドラの使い方

では、実際にイベント発生時の処理を設定してみましょう。

今回の記事では、changeイベント、すなわちonchangeイベントハンドラを使用してみましょう。

イベントハンドラを登録する方法はひとつではありません。

今回は、3種類ほどご紹介していきたいと思います。

HTML属性を使う方法

まず最初にHTMLのイベント属性を使用してイベント処理を行ってみましょう。

以下のコードをご覧ください。

<html>
  <body>
 
    <p>Please enter something...</p>
    <input type="text" id="mytextbox" onchange="myfunc()">
 
    <script>
       function myfunc() {
 
          console.log("Hello world!");
 
       }
    </script>
 
  </body>
</html>

実行結果は以下の通りです。

Hello world!

上のコードでは、まず以下のような簡単なテキストボックスを作成しました。

2018-06-30

そして、inputタグのコードにonchange属性を追加しました。

この場合、onchangeイベントハンドラを発動させるために、onchange属性の値に関数myfuncを指定しました。

myfuncはHello world!とJavaScriptコンソールに表示させる、シンプルな関数です。

すると、テキストボックスに何かを入力した際にJavaScriptコンソールにHello world!と表示させる事が出来ました。

イベントプロパティを使う方法

では次にご紹介する方法は、イベントプロパティを使用する方法です。

以下のコードをご覧ください。

<html>
  <body>
 
    <p>Please enter something...</p>
    <input type="text" id = "mytextbox" onchange="myfunc()">
 
    <script>
       var mybox = document.getElementById("mytextbox");
       function myfunc() {
          console.log("Hello world!");
       }
       mybox.onchange = myfunc();
    </script>
 
  </body>
</html>

実行結果は以下の通りです。

Hello world!

上のコードでは、ドット(.)を使用し、onchangeプロパティの値として指定したい関数を代入します。

getElementById関数任意の要素を取り出して変数myboxに格納しました。

そして、その要素のonchangeプロパティの値に関数を設定しています。

指定した関数はmyfuncで、console.log関数を使用してHello world!と表示させるシンプルな関数です。

ご覧いただけるように、myboxと記述した後にドットを使用してonchangeプロパティにアクセスしています。

この場合は、先ほどとは違いHTML要素の中身を変更しません。

イベントリスナーを使う方法

では、イベントリスナーを使用する方法をご紹介します。

先ほど紹介した二つの方法はシンプルですが、欠点がひとつあります。

同じ要素の同じタイプのイベントに複数の処理の登録が出来ないというところです。

複数の処理を登録しようとすると、以前に登録した処理が最新のものに上書きされてしまうのです。

イベントリスナーを使用する方法は、複数のイベントを登録することを可能にします。

イベントリスナーを使うということは、JavaScriptの既存メソッドのaddEventListenerを使用するということです。

以下のコードをご覧ください。

<html>
  <body>
 
    <p>Please enter something...</p>
    <input type="text" id = "mytextbox" onchange="myfunc()">
 
    <script>
       var mybox = document.getElementById("mytextbox");
       function myfunc() {
          console.log("Hello world!");
       }
       mybox.addEventListener("change",myfunc);
    </script>
 
  </body>
</html>

実行結果は以下の通りです。

Hello world!

上のコードでは、フォームの作成や要素の取り出しなどは先ほどと何も変わりません。

変わるのは、その要素のメソッドaddEventListenerを使用し、処理を登録している部分です。

addEventListenerはふたつの引数を必要とします。

1つ目はイベント名です。

今回は「フォームの内容が変更された時」なので、changeイベントです。

ここではイベントハンドラではなくイベント自体を指定するので、onは付けなくて良いです。

2つ目は、処理の際に実行したい関数です。

この場合も、myfuncというHello world!とコンソールに表示させるシンプルな関数を指定してみました。

イベントリスナーについてのより詳しい説明は以下のリンクを参照してください。

ボタンイベントの作り方

この章では、ボタン要素にイベント処理を追加する方法について見ていきましょう!

主に、ラジオボタンにイベント処理を実装する方法について学んでいきます。

ラジオボタンを作ってみよう

まずは簡単なラジオボタンのフォームを作ってみましょう。

ラジオボタンは、いくつかの選択肢から1つだけクリックすることができるのが特徴です。

次のサンプル例を見てください!


10
100

この例では、「1」「10」「100」という3つの選択肢を配置したラジオボタンになります。

注目して欲しいのはいずれのフォーム要素にも「name属性」を設定している点です。

これにより、どれか1つをクリックした時にJavaScriptから簡単に値を取得できるようになるのです。

ラジオボタンをクリック(選択)してイベント処理を行う

それでは、実際にJavaScriptからラジオボタンのクリックイベントの処理をプログラミングしていきましょう。

まず、該当のフォーム要素を取得するには次のような構文を利用できます。

document.formタグのname属性値.inputタグのname属性値

このようにdocumentに続けてフォーム要素のname属性値を連結していくだけで目的の要素を取得することができるのです。

そのため、選択したラジオボタンの値を取得するには次のようになります。

document.myform.myradio.value

さらに、クリックした時に値を取得するには次のようなイベント処理を記述することができます。

document.myform.addEventListener('change', function() {

    console.log(document.myform.myradio.value);

})

「document.myform」に続けてaddEventListenerで「change」イベント処理を記述することで、クリックされた時の処理を制御できます。

あとは、コールバック関数内で選択されたラジオボタンの値を取得すれば良いわけですね。

まとめ

今回はJavaScriptプログラミングにおいてよく見かける「on○○」、すなわちイベントハンドラやその使い方を解説しました。

イベント処理はJavaScriptプログラミングでは頻繁に出現するものなので、覚えておくと便利です。

みなさんもこの記事を通して、イベント処理やイベントハンドラについての知識をどんどん深めていってくださいね。

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次