【JS】【クライアント】イベント処理

クライアントJavaScriptプログラムは、非同期イベント駆動プログラミングモデルを採用しています.
イベントの種類
従来のイベントタイプ
フォームイベント

sumitイベント

リセットイベント

Windowイベント
Windowイベントとは、ウィンドウに表示されているものではなく、イベントの発生とブラウザウィンドウ自体の特定の文書の内容との関連を指します.

ロードイベント——ドキュメントと他のすべての外部リソースが完全にロードされ、ユーザに表示されると、それをトリガする

.

unloadイベント、およびロードに対して、ユーザがドキュメントを離れて他のドキュメントに移ると、

がトリガされる.

beforeunloadイベント――unloadと類似していますが、ユーザが現在のページから離れる機会を判断するかどうかの問い合わせを提供することができます.

オンロ事件

resize()およびscroll()イベントは、ユーザがブラウザウィンドウのサイズを調整したりスクロールしたりするとトリガ

をトリガする.
マウスイベント
ユーザーがドキュメント上でマウスを移動したりクリックしたりすると、マウスのイベントが発生します.

mousemooveイベント——ユーザがマウスを移動またはドラッグするたびに

mousedownイベント

mouseupイベント

click事件―― 

mouseoverイベントは、ユーザがマウスポインタを移動するときに、代わりに、新しい要素に懸濁させる

です.

mouseoutイベント——マウスの移動ポインタがある要素に止まっていないとき

mousewheelイベント——ユーザーがマウスホイールを転がす時

キーボードイベント

keydownイベント

keyup事件

keyperresイベント——keydownとkeyupの間で別のkeyperresイベントが発生します.キー

ではなく、イベントオブジェクトは、より上位のテキストイベントである.
DOM事件
HTML 5イベント
タッチパネルとモバイルデバイスイベント
イベントハンドラの登録
JavaScriptオブジェクトの属性をイベントハンドラに設定します.
イベントハンドラの属性の名前は「on」「後にイベント名が付いています.onclick、onchange、onloadなどです.これらの属性名は大文字と小文字を区別しています.
HTMLタグの属性をイベントハンドラに設定します(少な目)
属性値はJSコード文字列であるべきです.このコードは、完全な関数宣言ではなく、イベントハンドラ関数の主体であるべきです.
たとえば:

<button onclick="alert(’  sss‘);"></button>

複数の語句が含まれている場合、これらの語句をセミコロンで区切るか、属性値をオフにして複数の行にまたがります.
addEvent Listener()
IE 8の前のバージョン以外のすべてのブラウザでサポートされている標準イベントモデルでは、イベントターゲットと呼ばれるオブジェクト、これらのオブジェクトはWindowオブジェクト、Dcumentオブジェクト、およびすべてのドキュメント要素を含みます.addEventListener()という方法を定義しています.この方法でイベントターゲットにイベントハンドラを登録することができます.
addEvent Listener()は3つのパラメータを受け入れる:

最初のイベントは処理プログラムを登録するイベントタイプで、このイベントタイプは文字列

です.

番目のパラメータは、指定されたタイプのイベントが発生したときに呼び出すべき関数

である.

の最もパラメータがブール値であり、通常はfalseである.tureが渡されると、関数はイベントハンドラとして登録され、イベントの異なるスケジューリング段階で

を呼び出す.
何度もaddEventListnerを呼び出すことにより、同一のオブジェクトに同じイベントタイプの複数の処理プログラム関数を登録することができます.オブジェクト上でイベントが発生した場合、すべてのイベントタイプの処理プログラムは登録された順番で呼び出されます.
addEvent Listener(0のはremoveveveveventListener()方法に対しても、3つのパラメータがあります.
atachEvent()
IE 9以前のIEは、addEvent Listener()とremoveEventListener()をサポートしていなかった.
イベントハンドラの呼び出し
イベントハンドラのパラメータ
通常、イベントハンドラを起動するときは、イベントオブジェクトをパラメータとして使用します.
IE 8および以前のバージョンでは、プロパティ登録イベントハンドラを設定することにより、イベントオブジェクトを転送しない代わりに、グローバルオブジェクトwindow.eventを介してイベントオブジェクトを取得する必要があります.
たとえば:

function handler(event){
    event = event || window.event;
    ... ...
}

イベントハンドラの実行環境
属性登録イベントハンドラを設定することにより、イベントハンドラ内で、thisキーワードとは、イベントターゲットを指します.
さらに、addEventListener(0を登録すると、呼び出した処理プログラムはイベントターゲットをそれらのthis値として使用する.
イベントハンドラの戻り値
オブジェクト属性やHTML属性を設定してイベントハンドラの戻り値を登録することは、非常に興味深い場合があります.通常、戻り値falseは、このイベントに関するデフォルトの操作を行わないようにブラウザに通知します.
イベントハンドラの戻り値は、属性で登録された処理プログラムにのみ意味があります.addEventListener()でイベントハンドラを登録すると、preventDefault()メソッドを呼び出したり、イベントオブジェクトを設定したりするreturn Value属性に変わります.
イベントハンドラの呼び出し順序/優先度
ブラウザは以下の規則に従ってすべてのイベントハンドラを起動します.

オブジェクト属性またはHTML属性を設定することにより登録された処理プログラムは、優先的に

を呼び出します.

addEventListener()を使用して登録された処理プログラムは、それらの登録順に

を呼び出す.

は、atachEvent()を用いて登録された処理プログラムを任意の順序で呼び出すことができるので、コードは呼び出し順序

に依存してはならない.
事件が広がる
イベントターゲットがWINDOWオブジェクトまたは他のいくつかの個別オブジェクトである場合、ブラウザは、オブジェクト上の適切な処理プログラムを呼び出してイベントに応答する.
イベントのターゲットがドキュメントまたはドキュメント要素である場合は、複雑です.
ターゲットの要素に登録されたイベントハンドラを呼び出した後、ほとんどのイベントは"ドムツリーに泡を立てます.ターゲットの親要素のイベントハンドラを呼び出し、ターゲットの祖父要素に登録されているイベントハンドラを呼び出します.これはドキュメンテーションに続き、最後にWINDOWオブジェクトに到達します.
イベント泡は、大量の個々の文書要素に登録された処理プログラムに代替案を提供し、すなわち、共通の祖先要素に登録された処理プログラムですべてのイベントを処理する.
イベントのキャンセル
イベントのブラウザのデフォルト操作をキャンセルします.