JavaScript イベント モデルの概要 (グラフィック チュートリアル)

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

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 属性としての時間ハンドラーであっても、それ自体の属性は関数 "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();

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

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

2. DOM2 イベント モデル

このモデルは、w3c によって開発された IE のバブル モデルを参照して定式化されています。開発された仕様。元のモデルでは、イベントが発生するとイベント ハンドラーが直接呼び出され、他のイベント伝播プロセスはありません。DOM2 モデルでは、イベントには 3 つの段階に分かれた特別な伝播プロセスがあります。 1) キャプチャフェーズ: イベントはドキュメントからターゲット要素まで伝播されます。イベントに関心のある祖先要素は、

(2) ターゲット フェーズに登録できます。 : イベントがターゲット要素に到達し、ターゲット要素のイベント処理関数を実行します。

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

イベントの伝播プロセス全体で、event.stopPropagation() を呼び出してイベントの伝播を停止し、preventDefault() を呼び出すことができます。ブラウザのデフォルトの動作

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

3、IEモデル

IEモデルも提供されています。イベントオブジェクトはイベントの詳細をカプセル化しますが、イベントは1つしかないため、IEはオブジェクトをイベント処理関数に渡しません。 IE は、いつでもそれをグローバル オブジェクト ウィンドウの属性として使用します。IE のイベント伝播モードは、DOM2 の第 2 段階と第 3 段階に対応し、ターゲット要素の処理関数が最初に実行され、次にドキュメントに伝播されます。 . IE ではマウスイベントのみをキャプチャできますが、DOM2 ではすべてのイベントをキャプチャできます。 IE のイベント処理関数の登録と削除は、DOM2 とは異なります。 ("eventType","handler") および detachEvent("eventType","handler") との違いは、eventType にプレフィックス

が付いていることです。 伝播プロセスはバブルするだけで、キャプチャは行いません。バブル割り込みメソッド:

window.ecent.cancelBubble=true;

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

3. イベント登録関数:attachEvent() と登録解除: detachEvent()。 Netscape4 のイベント モデル

Netscape は開発を完全に停止しているようですので、簡単に説明します。泡立てずにキャプチャーするだけ。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptの自己実行匿名関数を深く理解する(グラフィックチュートリアル)

javascript

のnew演算子の原理を詳しく説明する(グラフィックチュートリアル)

解説JavaScript 関数の詳細 4 つの存在形態 (画像とテキストのチュートリアル)

以上がJavaScript イベント モデルの概要 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。