JavaScriptイベントモデルとは何ですか

さまざまなブラウザには、オリジナルのイベント モデル、DOM2 イベント モデル、IE イベント モデルの 3 つのイベント モデルがあります。オリジナルのイベント モデルはすべてのブラウザでサポートされています。 DOM2 で定義されたイベント モデルは、現在、IE を除くすべての主要なブラウザーでサポートされています。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

1. オリジナルのイベント モデル

イベント タイプ: 「入力イベント (onclicki など)」と「セマンティック イベント (onsubmit など)」に分けられます

イベント プログラムは次の方法で登録できます:

1. HTML プロパティ値としての JS コード

<input type="button" value="Press me" onclick="alert(&#39;thanks&#39;);"

2. JS 属性としてのイベント ハンドラー

注: ドキュメント ドキュメント ツリー内の各 HTML 要素には、対応する JS オブジェクトがあります。この JS オブジェクトのプロパティは、その HTML 要素のプロパティに対応します。HTML プロパティとしての JS コードであっても、JS プロパティとしての時間ハンドラであっても、そのown 属性はすべて関数「function」です。

<form name="f1">

<input name="b1" type="button" value="Press Me"/>

</form>

最初の代入メソッド:

document.f1.b1.onclick=function(){alert('thanks');};

2 番目の代入メソッド:

function plead(){window.status="Please Press Me!";}

document.f1.bi.onmouseover=plead;

JS のイベント ハンドラとして使用できます属性 JS 属性は明示的に

document.myfrom.onsubmit();

を呼び出します。イベント ハンドラーは false を返して、ブラウザーがイベントのデフォルトのアクション (onsubmit などのよく使用される操作) を実行しないようにすることができます。例外は、ハイパーリンク マウスオーバーの window.status 表示イベントのブロックであり、true を返します。例:

<a href="help.htm" onmouseover="window.status=&#39;help&#39;;return true;">help</a>

2. DOM2 イベント モデル

このモデルIEのこと w3cで策定された仕様であるバブルモデルに基づいて策定されている オリジナルモデルでは、イベントが発生するとイベントハンドラが直接呼び出され、それ以外のイベント伝播処理はありません DOM2モデルでは、イベントには特別な伝播プロセスがあり、次の 3 つのフェーズに分かれています:

(1) キャプチャ フェーズ: イベントはドキュメントからターゲット要素まで伝播されます。任意の祖先要素がイベントに関心がある場合、独自のハンドラーを登録できます。 Function.

(2)ターゲット フェーズ: イベントがターゲット要素に到達すると、ターゲット要素のイベント処理関数が実行されます。

#(3)バブリングフェーズ: イベントはターゲット要素からドキュメントに到達するまで発生します。すべてのイベントタイプがキャプチャフェーズを通過しますが、一部のイベントのみがバブリングフェーズを通過します。たとえば、の場合、送信イベントは発生しません。イベント伝播プロセス全体で

Event.stopPropagation() を呼び出してイベントを停止できます。伝播するには、preventDefault() を呼び出して、ブラウザのデフォルト動作を防止します。

addEventListener("eventType","handler","true!false");

removeEventListner("eventType","handler","true!false");

3. IE モデル##IE モデルは、イベントの詳細情報をカプセル化するイベント オブジェクトも提供しますが、IE はそのオブジェクトをイベント処理関数に渡しません。常に 1 つのイベントであるため、IE はそれをグローバル オブジェクト ウィンドウの属性として使用します。IE のイベント伝播モードは、DOM2 の 2 番目と 2 番目のイベントに対応します。第 3 段階では、ターゲット要素の処理関数が最初に実行されます.## を上方向に伝播してドキュメントに到達します。IE ではマウス イベントのみがキャプチャできますが、DOM2 ではすべてのイベントがキャプチャできます。IE でのイベント処理関数の登録と削除の方法も DOM2 とは異なります。.

イベント処理関数の登録と削除は、要素のattachEvent("eventType","handler")およびdetachEvent("eventType","handler")によって行われます。dom2との違いは、eventTypeにonプレフィックスが付いていることです

機能:

1. 伝播プロセスは泡立つだけで、捕捉されません。バブル割り込みメソッド:

window.ecent.cancelBubble=true;

2. Event オブジェクトはイベント ハンドラーの関数パラメータではなく、ウィンドウのグローバル変数です。

3. イベント登録関数:attachEvent() と登録解除:detachEvent().

4. Netscape4 イベント モデル

Netscape はらしいので開発が完全に中止されているので詳細は省略しますが、簡単に言うとバブルをキャプチャするだけで、バブルはキャプチャしません。

[推奨学習:

JavaScript 上級チュートリアル

]

以上がJavaScriptイベントモデルとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。