JS-JavaScriptイベント処理基礎、イベントモデル、イベントフロー(発泡型、捕獲型、混合型)、バインディングイベント(静的バインディングと動的バインディング)、イベント処理関数

JavaScript事件の基礎
JavaScriptとユーザーとの相互作用はイベント駆動によって実現され、イベント駆動は対象プログラム設計に向けた重要な概念であり、その核心はメッセージをベースにして、イベントで駆動することである.ウェブページオブジェクトに特定のイベントが発生すると、ブラウザは自動的にイベントオブジェクト(Event)を生成し、イベントオブジェクトは通常DOMノードに沿って伝播し、スクリプトによって捕捉されることを知る.イベントバインディング応答プログラム(イベントハンドラ関数)の場合、ブラウザはイベントハンドラを呼び出し、コードを実行し、所定のタスクを完了します.
イベントモード
ブラウザの開発履歴には、4つのイベント処理モデルが登場します.

基本イベントモデルもDOM 0イベントモデルとなり、ブラウザ初期に出現した比較的簡単なイベントインタラクション方式であり、主にイベント属性を通じてラベルバインディングイベント処理関数を指定する.このようなインタラクション方式の応用は比較的に広いので、すべてのブラウザの支持を得て、現在は比較的に流行っています.しかし、このモデルはHTML文書に対して深刻な依存性を持っており、JavaScriptの独立開発には不利である.

DOMイベントモデルはW 3 Cにより制定され、現在の標準的なイベントハンドリングモデルである.すべての標準的なブラウザはこのモデルをサポートしています.IE怪異モードはサポートしていません.DOMイベントモデルは、DOM 2イベントモジュールとDOM 3イベントモジュールを含み、DOM 3イベントモジュールは、DOM 2イベントモジュールのアップグレード版であり、主にモバイルデバイスの開発ニーズに適応するためにいくつかのタイプが追加されましたが、ほとんどの仕様と使用方法は一致しています.

IEイベントフローIE 4.0およびそれ以上のバージョンのブラウザは、DOMイベントモデルと似ているが、使い方は異なる

.

NetscapeイベントモデルはNetscape 4ブラウザで実現され、Netscape 6では

のサポートを停止します.
事件の流れ
イベントフローは、複数のノードオブジェクトが同じイベントに応答する順序であり、主に3つのタイプを含む.

泡型:イベントは最も特定の目標から最も不特定の目標(documentオブジェクト)にトリガされ、つまりイベントが下から上に応答し、このプロセスはイメージされた泡

と呼ばれる.

キャプチャタイプ:イベントは、最も特定されていないターゲット(documentオブジェクト)からトリガされ、特定のターゲット、すなわちイベントが上下に応答する

.

ハイブリッドタイプ:W 3 CのDOMイベントモデルは、捕獲型と発泡型の2つのイベントフローをサポートしているが、捕獲型イベントストリームは先に発生し、その後、発泡型イベントフローが発生する.二つのイベントフローはDOM種のすべての階層のオブジェクトに触れ、documentオブジェクトから始まり、最後にdocumentオブジェクトに戻ります.

イベントフローのタイプによって、イベントが伝播するプロセス全体を3つの段階に分けることができる.

キャプチャフェーズ:イベントは、ドキュメンテーションオブジェクトからドキュメントツリーに沿って、ターゲットノードのいずれかの上位ノードに同じイベントが登録されていると、イベントは、伝播プロセスの種類において、最初に最上部の上位ノードにおいて実行され、順次下に伝播される.

ターゲットフェーズ:ターゲットノードに登録されたイベントが実行される

.

発泡段階:イベントは対象ノードから上位ノードにトリガされ、同じイベントが上位ノードに登録されている場合、逐次応答して、順次上に伝播する

.
バインディングイベント
基本イベントモデルでは、JavaScriptは2つの結合方式をサポートしています.
1.静的バインディング:JavaScriptスクリプトを属性値として、直接にイベントの属性を付与する

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

2.動的バインディング:DOMオブジェクトのイベント属性を使用して賦課します.

<button id="btn">  </button>
<script>
	var button = document.getElementById("btn");
	button.onclick = function(){
		alert('      !');
	}
</script>

イベントハンドラ
イベントハンドラ関数は、イベントハンドラを実現するための特別な関数であり、非同期呼出しとして、イベントトリガにより応答する.
イベントハンドラクションには通常、明確な戻り値がありませんが、特定のイベントでは、ユーザは、ハイパーリンクをクリックしたときなど、イベントハンドラの戻り値を利用してプログラムの実行に影響を与えることができます.
例:ボタンオブジェクトに一つのイベントをバインドします.イベント処理関数では、パラメータeがイメージパラメータであり、イベントに応答すると、ブラウザはイベントオブジェクトをイメージ変数eに渡し、イベントオブジェクトを実際の参加者として渡し、イベントオブジェクトに含まれるイベント情報を読み取り、イベント処理関数に現在のソースノード名を出力します.

<button id="btn">  </button>
<script>
var button = document.getElementById("btn");
button.onclick = function(){
	var e = e || window.event;
	document.write(e.srcElement ? e.srcElement : e.target);
}
</script>

注意:IEイベントモデルとDOMイベントモデルは、イベントオブジェクトに対する処理方式が異なる:

IEは、イベントオブジェクトをwindowオブジェクトと定義する属性

を有する.

DOMイベントモデルは、イベント処理関数のデフォルトパラメータ

としてイベントを定義する.