スライドショー

【JavaScript入門】一気にマスター!基本的なイベント処理方法まとめ

みなさんこんにちは!Kotonoです。

今回はJavaScriptにおける「イベント処理」について解説していきたいと思います。

この記事では

・イベントとは
・イベントの種類

などといった基本的な内容から

・イベントの処理方法
・HTMLのイベント属性を使う方法
・イベントプロパティを使う方法
・イベントリスナーを使う方法

など、より具体的な内容に関してもわかりやすく説明していきたいと思います。

イベントとは

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

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

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

それらのイベントに対して処理を行うことが出来ます。

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

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

イベントハンドラの種類

イベントハンドラによって、発生したイベントごとに処理を実行させることができます。

ページ上では様々な種類のイベントが発生するので、イベントハンドラもその数存在します。

以下のリストに主なイベントハンドラを集めました。

onClick マウスがクリックされた時
onMouseover マウスカーソルがオブジェクトに重なった時
onLoad ページが読み込まれた時
onChange フォームの内容が変更された時

上記のほんの一部で、実際には他にも色々存在します。

しかし、扱い方は基本的には皆同じなので頻出するイベントの処理方法から覚えていきましょう。

イベントの処理方法

では早速、イベントの処理方法をご紹介していきます。

これからご紹介するサンプルコードでは、ページ上のボタンをクリックした際に発生する処理を書いて行きたいとおもいます。

まずは、以下のコードのように、ページ上にボタンを作成しましょう。

<html>
 <body>

 <p>ボタンをクリック!</p>

 <input type="button" name = "btn" value="Check!">

 </body>
</html>

上のコードを実行させると以下のようなボタンがページ上に表示されます。

2018-06-23

ご覧いただけるように、Click!と書かれたボタンがひとつ作成されています。

HTMLのイベント属性を使う方法

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

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

<html>
 <body>
 <p>ボタンをクリック!</p>

 <input type="button" id="mybutton" value="Click!" onclick="console.log('Hello')">

 </body>
</html>

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

Hello

上のコードでは、先ほどご紹介したボタン作成のコードにonclick属性を追加しました。

この場合、onclickイベントハンドラを発動させるために、onclick属性の値にconsole.log("Hello")と指定しました。

こうすると、ボタンをクリックした際にJavaScriptコンソールにHelloと表示させる事が出来ます。

この方法はinputタグ要素のみだけでなく、他のドキュメント内の要素などにも適用可能です。

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

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

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

<html>
  <body>
  <p>ボタンをクリック!</p>

  <input type="button" id="mybutton" value="Check">

  <script> 
    var button = document.getElementById("mybutton");
    var myfunc = function(){
      console.log("Hello");
    }
 
    button.onclick = myfunc;
  </script>
 
  </body>
</html>

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

Hello

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

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

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

指定した関数はmyfuncで、console.log関数を使用してHelloと表示させる単純な関数です。

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

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

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

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

これまでご紹介してきたイベントハンドラやHTMLのイベント属性を使用する方法では、同じ要素の同じタイプのイベントに複数の処理を登録しようとすると処理が上書きされてしまうという欠点があります。

上書きされてしまうので、最後に登録した処理のみが実行されてしまいます。

イベントリスナーは上記のような悩みを解消し、複数のイベントを登録することを可能にします。

この方法では、JavaScriptの既存メソッドのaddEventListenerを使用し、任意の要素にイベントリスナーを登録します。

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

<html>
  <body>
  <p>ボタンをクリック!</p>

  <input type="button" id="mybutton" value="Check">

  <script> 
    var button = document.getElementById("mybutton");
    var myfunc = function(){
      console.log("Hello");
    }
 
    button.addEventListener("click",myfunc);
  </script>
 
  </body>
</html>

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

Hello

上のコードでは、先ほどと同じようにgetElementById関数で任意の要素を取り出し、変数buttonに格納しました。

そして、その要素のメソッドaddEventListenerを使用し、処理を登録しています。

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

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

この場合、イベントハンドラのonclickのようにonは付けないので、注意してください。

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

addEventListener関数は、上記のような利点もあるのでとても普及しているので、覚えておいて損はありません。

まとめ

今回はJavaScriptにおける「イベント処理」について解説しました。

イベントとはドキュメント内に起こるあらゆる出来事を指すので、様々なイベントの種類が存在します。

しかし処理方法はほとんど同じなので、基本を押さえておくととても便利です。

皆さんもこの記事を通して、イベント処理に関する知識をどんどん深めていってくださいね。

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。