イベントハンドラー/イベントリスナーについて[addEventListener]

2017年3月11日

Webページ上(Webアプリケーション上)で、ボタンをクリックしたり画像上をマウスオーバーするなどのアクションや、ページを読み込むなどの一連の挙動を「イベント」と呼びます。

 

そして、それら様々なイベントに対応して発動させる処理のことを(つまり関数)を「イベントハンドラー」または「イベントリスナー」と呼びます。

 

 

スポンサーリンク

 

 

イベントには主に下記のような種類があります。もちろん下記だけではなく、多くのイベントがあります。

 

イベント名 アクション/挙動 イベントハンドラ名(onイベント名)
 click  クリックした時  onclick
 dblclick  ダブルクリックした時  ondblclick
 mouseover  マウスオーバーした時  onmouseover
 mouseout  マウスアウトアウトした時   onmouseout
 keydown  キーを押した時  onkeydown
 keypress  キーを押して放した時  onkeypress
 load  HTML文書の読み込みが完了した時  onload
 unload  ページを移動する時  onunload

 

上記以外にも多くのイベントが存在します(下記リンク参照)。
Event reference

 

 

イベントに対応した処理の記述方法は、大きく分けて3つに分けられます。

 

・HTML要素の属性としてのイベントハンドラー
・DOM要素のプロパティにイベントハンドラーを指定
・イベントリスナー

 

具体的なイベントハンドラー/イベントリスナーのコードを説明していきます。

 

 

HTML要素の属性としてのイベントハンドラー


 

例1

 

HTMLタグ内にonclick属性、つまりイベントハンドラー名を属性として記述し、アラートを呼び出しています。下記の例2では、JavaScriptの部分を関数でまとめています。

 

例2

 

 

DOM要素のプロパティにイベントハンドラーを指定


 

例3

 

例1、2と違うのは、HTMLの属性としてイベントハンドラー名を記述していない点です。JavaScriptのコードとHTMLは混在させないようにするのが理想的です。

 

5行目

onloadイベントハンドラはWebページの読み込みが完了した際に呼び出されるイベントハンドラーです。DOM要素が全て読み込まれた後でないと、下記で説明するようなDOMによる処理は実行されません。詳しい挙動は下記の関連ページをご覧下さい。

 

関連ページ

DOMContentLoadedイベントとloadイベントの違い

 

6行目
idがtextのdiv要素を取得し、objオブジェクト(要素オブジェクト)に代入しています。要素オブジェクトについては下記の関連ページをご覧下さい。

 

関連ページ

getElementByIdについて[DOM][ノード][Element]

 

8行目
objオブジェクトのプロパティとして、onclickイベントハンドラーを設定しています。つまり、objオブジェクト(要素オブジェクト)をクリック(click)するとアラートが呼び出される関数が呼ばれます。

 

下記の例4では、obj.onclickに対して2つの関数(つまりイベントハンドラー)を設定していますが、結局呼ばれるのは二つ目の関数のみです。このようにある要素(例ではdiv要素)のイベント(例ではonclick)に対して、ひとつの関数(イベントハンドラー)しか設定できませんこの問題を解決するのが「イベントリスナー」です。

 

例4

 

 

 

イベントリスナー


 

例5

 

16、17行目
objオブジェクトにaddEventListenerメソッドを設定しています。

 

addEventListenerの第1引数にはイベント名、第2引数には呼び出したい関数名、第3引数にはイベント伝搬の設定をします。通常はfalseで良いでしょう。イベント伝搬の挙動(キャプチャフェーズ/ターゲットフェーズ/バブリングフェーズ)については本記事においては説明しません。

 

objオブジェクトのクリック(click)イベントに対してfnc1、fnc2と2つの関数を設定しているのが分かります。この関数がいわゆるイベントリスナー関数です。実際にクリックしてみると、例4と違い「クリック1」「クリック2」とメッセージが表示され、2つの関数が呼ばれているのが分かります。

 

 

スポンサーリンク

 

 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー