みなさんこんにちは！Kotonoです。
今回はJavaScriptにおける「イベント処理」について解説していきたいと思います。
この記事では
・イベントとは
・イベントの種類
などといった基本的な内容から
・イベントの処理方法
・HTMLのイベント属性を使う方法
・イベントプロパティを使う方法
・イベントリスナーを使う方法
など、より具体的な内容に関してもわかりやすく説明していきたいと思います。
イベントとは
みなさんは「イベント」とは何かわかりますか？
JavaScriptにおける「イベント」とは、ウェブページ上で発生するあらゆるアクションの総称です。
例えば、ボタンのクリック、ページの読み込み、マウスポインタを要素の上に合わせるなど、様々な出来事がページ上で発生します。
それらのイベントに対して処理を行うことが出来ます。
例えば、ボタンがクリックされた際にアラートを表示させる、など様々な処理が考えられますよね。
イベントの処理を行うのが「イベントハンドラ」の役目です。
イベントハンドラの種類
イベントハンドラによって、発生したイベントごとに処理を実行させることができます。
ページ上では様々な種類のイベントが発生するので、イベントハンドラもその数存在します。
以下のリストに主なイベントハンドラを集めました。
・onClick マウスがクリックされた時
・onMouseover マウスカーソルがオブジェクトに重なった時
・onLoad ページが読み込まれた時
・onChange フォームの内容が変更された時
上記のほんの一部で、実際には他にも色々存在します。
しかし、扱い方は基本的には皆同じなので頻出するイベントの処理方法から覚えていきましょう。
イベントの処理方法
では早速、イベントの処理方法をご紹介していきます。
これからご紹介するサンプルコードでは、ページ上のボタンをクリックした際に発生する処理を書いて行きたいとおもいます。
まずは、以下のコードのように、ページ上にボタンを作成しましょう。
<html> <body> <p>ボタンをクリック！</p> <input type="button" name = "btn" value="Check!"> </body> </html>
上のコードを実行させると以下のようなボタンがページ上に表示されます。
ご覧いただけるように、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における「イベント処理」について解説しました。
イベントとはドキュメント内に起こるあらゆる出来事を指すので、様々なイベントの種類が存在します。
しかし処理方法はほとんど同じなので、基本を押さえておくととても便利です。
皆さんもこの記事を通して、イベント処理に関する知識をどんどん深めていってくださいね。
