もじゃもじゃラボ/Webページに動きをつけるプログラミングを学ぼう！/イベント
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

イベント

CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
このチャプターの目次

イベント

イベントとは、JavaScriptを実行するタイミングのことです。
何らかのアクションが発生した際にプログラムに送られる信号のことです。例えば、ボタンなどをクリックした際には、「クリックされたということ」がプログラムに通知されます。
イベントが発生した際に実行される処理のことをイベントリスナー（またはイベントハンドラー）と言います。
JavaScriptでは、イベントが発生した際にどのイベントリスナーが実行されるかを設定する必要があります。これをイベントリスナーの実装と呼びます。
ボタンをクリックするとプログラムの処理1が実行され、mouseoverすると処理2が実行ようになります。
mouseoverとは、マウスのカーソルをボタンの上に持ってきた時に発生するイベントです。

イベントリスナーの実装

イベントリスナーの実装方法は3つあります。
  1. HTMLの属性に設定する
  1. オブジェクトのプロパティに設定する
  1. addEventListenerメソッドを使用する
addEventListenerはオブジェクトのメソッドです。

HTMLの属性に設定する

cliclkされたときの属性は”onclick”です。
のHTMLタグでonclick属性を使っています。onclick属性の値には、実行される処理が記述されています。ここでは、alertという命令文を使用しています。alertは「ボタンが1つ付いたメッセージボックス」を表示する命令文です。
これにより、クリックされたことが一目でわかるようにしています。
mouseoverされた時はonmouseover属性を使います。
p要素の上にマウスが乗った時、alertでメッセージが表示される処理を記述しています。
他にもたくさんのイベントがありますが、それらのイベントものような属性名になります。

オブジェクトのプロパティに設定する

次に、オブジェクトのプロパティに設定する方法を見ていきましょう。
先ほどとは異なるイベントの例を紹介します。というイベントです。
このイベントは、ページの読み込みが完了した時に発生します。ブラウザの組み込み変数であるを使用します。
これは、ページを読み込んでいるブラウザ自体を指す変数です。JavaScriptを実行する際に使用できます。のようにあらかじめ用意されている変数です。
プロパティはになります。関数を作成し、ここに関数名を指定することで、関数自体が代入されます。onloadには関数名の文字列ではなく、関数自体（関数オブジェクト）が代入されることに注意してください。
関数の中の処理だけが代入されるので、関数名はどこに書かれている処理かを特定するだけで、名前自体はあまり重要ではありません。
なので、このようなことも可能です。
キーワードを使って関数の宣言と同時に代入を行うこともできます。この関数には名前がありません。このような関数のことを無名関数（匿名関数）と言います。

addEventListenerメソッドを使用する

addEventListenerの構文です。
オブジェクトの部分には変数を指定します。イベントが発生する要素を事前にgetElementByIdなどで取得し変数に代入します。その変数を指定して処理を行います。
addEventListenerの引数は2つあります。1つ目はイベントの種類を指定するための文字列です。例えば、"click"や"mouseover"、"load"などです。2つ目の引数には関数名を指定し、関数自体（関数オブジェクト）を渡します。
関数を事前に作成し、ここに関数名を指定することで、関数が設定されます。「関数自体が設定される」という意味です。関数名の文字列ではなく、関数オブジェクトである関数内の処理が設定されることに注意してください。
具体例です。
このような タグがあったとしましょう。
事前にshowAlertという関数を作成しておきます。
documentオブジェクトのquerySelectorメソッドを使って、img要素を取得しています。そのオブジェクトを使用して、addEventListenerメソッドでイベントリスナーを実装しています。1つ目の引数には”click”イベントを（ここはonclickではありません）、2つ目の引数にはshowAlert関数を設定しています。画像がクリックされると、alert命令文でメッセージが表示されます。
もう1つの具体例です。
addEventListenerの2つ目の引数には、関数自体、関数内の処理だけがイベントリスナーに設定されます。つまり、関数名自体はあまり重要ではないのです。
functionキーワードを使って関数の宣言と同時に代入を行うこともできます。この関数には名前がありません（無名関数と言います）。
前述の例と同じようにimgタグがあるとして、
documentオブジェクトのquerySelectorメソッドを使って、img要素を取得しています。
取得したオブジェクトを使用して、addEventListenerメソッドでイベントリスナーを実装しています。1つ目の引数には”click”イベントを、2つ目の引数には無名関数を設定しています。画像がクリックされると、alert命令文でメッセージが表示されます。

イベントの種類

参考までに、代表的なイベントの種類を以下に挙げておきます。
イベント意味オブジェクトまたは要素
click要素をクリックした時に発生するイベント全ての要素
mouseoverマウスが乗った時に発生するイベント全ての要素
mouseoutマウスが外れた時に発生するイベント全ての要素
loadページや画像の読み込みが完了した時に発生するイベントwindow body img
submitフォームを送信した時に発生するイベントform
change値が変わった時に発生するイベントInput select textarea
focusフォーカスが移った時に発生するイベントInput select textarea
blurフォーカスが外れた時に発生するイベントInput select textarea

サンプルコード

それではサンプルを実装していきましょう！ボタンクリック時のイベントリスナーをaddEventListenerで実装しています。
ボタンクリック前の表示です。
“Click me!”のボタンをクリックすると、「ボタンが押されました！」メッセージが表示されます。
前章でDOMの操作を学びましたが、実際には、何かアクションが発生したタイミングにWebページが変化することが多いです。イベントと組み合わせて使います。
Webページに動きをつけるプログラミングを学ぼう！