イベントについて

イベントについてまとめていきます。
javascriptは非同期のイベントドリブン型のイベント処理を行います。
主にブラウザ上でユーザの何らかの操作がされた時、イベントが生成されます。
また、画面操作以外にもブラウザ上のドキュメントがロードされた時のイベントや、
ユーザのマウス操作、フォームの操作等にもイベントを生成しています。

webアプリケーションでは、イベントが発生した時の処理をまとめて関数として作成し、
それを登録して処理を行います。

イベントタイプについて

イベントタイプは発生したイベントの種類を示します。
Event.typeとして書き、Eventインタフェースの読み取り専用プロパティ「type」を示します。
発生したイベントの種別を表します。
例として

keydown    // キーが最初に押された時
keypress   // キーが押された時(Ctrl、Alt、Shiftを除く)
keyup      // キーを離した時

mousedown  // マウスを押下した時
mouseup    // マウスを離した時
click      // マウスをクリックした時

等があります。

イベントターゲット、イベントハンドラ、イベントオブジェクトについて

イベントが発生したオブジェクトや関連するオブジェクトをイベントターゲットといいます。
「何」に対して、「どのような」イベントが発生したのかを定義する為、イベントターゲットとイベントは組み合わせて考えます(実装します)

イベントハンドラはイベントを処理する関数です。
イベントタイプとイベントターゲットを指定してイベントハンドラ関数をブラウザに登録してプログラムします。
指定したターゲット上でイベントが発生するとイベントハンドラが呼び出されます。

イベントオブジェクトはイベントが発生し、イベントハンドラが呼び出された時に一番目の引数に発生したイベント情報が格納されたオブジェクトが渡ります。
このオブジェクトのことをイベントオブジェクトと呼びます。
例えば、キーボードを押したときに発生するイベントに対しては、イベントオブジェクトを継承したキーボードイベントオブジェクト(KeyboardEventオブジェクト)が渡されます。
このオブジェクトにはユーザが押下したキー情報があり、プロパティを指定して参照することができます。
例えば

KeyboardEvent.altKey
KeyboardEvent.code
KeyboardEvent.ctrlKey

等があり、altKeyはAltキーが押下されている場合はtrue(Boolean)を返し、
codeは押下されたキーのキーコードを返し、
ctrlKeyはCtrキーが押下されている場合はtrue(Boolean)を返す
という動きになります。

また、マウス操作の場合には、イベントオブジェクトを継承したマウスイベントオブジェクト情報が格納されたオブジェクトが渡ります。
このマウスオブジェクトにはマウスポインタの座標が含まれたり、マウスボタンの状態も含まれています。

イベント伝播

イベント伝播を理解するには、「バブリング」と「キャプチャリング」の2通りの考え方があります。

イベント伝播 : バブリングについて

まずバブリングと呼ばれる考え方は、「イベント伝播はイベントが発生した際、どの要素にイベントが発生するかを決定する処理」と言えます。
HTMLDOM構造の中で発生したイベントはその要素の親要素へイベントが伝播していきます。
単一のDOM構造では、ユーザ操作したオブジェクト(要素)に対してイベントが発生しますが、
深くネストされたDOM構造では、ユーザが操作したオブジェクト(要素)の親要素にもイベントが発生します。
またその親要素自体もネストされていれば、親要素の親要素にもイベントが発生します。
このようにして、イベントが上の階層へ伝わっていくことをイベントバブリング(単にバブリング)と呼びます。

また、意図的に子要素のみでイベントを処理し、バブリングをさせない方法もあります。
「Event.bubbles」プロパティがfalseになっているとバブリングをせず、その要素のみでイベントが発生します。

イベント伝播 : キャプチャリングについて

次にキャプチャリングについてですが、イベントのバブリングとは逆に、ネストされたDOM構造の子要素で発生したイベントに対して、
Documentオブジェクト、html要素、body要素、div要素…と、DOMツリー構造の子、孫、その孫…という順番にイベントが伝播していくことを言います。

実際にはイベントリスナーの登録の際に、その要素がキャプチャリングの対象とするかを指定して呼び出します(デフォルトはfalseになっています)。
もし、キャプチャリングの対象とした場合は、目的の孫要素にイベント伝播が到達する前に、その上の階層のDOM要素で登録したイベントを呼ぶことができます。

以降の投稿では、これらのイベントについて、深く掘り下げて試していきます。