ホームページ > 記事 > ウェブフロントエンド > JavaScript イベント モデルの概要 (グラフィック チュートリアル)
さまざまなブラウザには 3 つのイベント モデルがあります: オリジナルのイベント モデル、DOM2 イベント モデル、IE イベント モデル。オリジナルのイベント モデルはすべてのブラウザでサポートされており、DOM2 で定義されたイベント モデルは現在、IE を除くすべての主要なブラウザでサポートされています。
1. オリジナルイベントモデル
イベントタイプ:「入力イベント(onclickiなど)」と「セマンティックイベント(onsubmitなど)」に分けられます
イベントプログラムの登録は以下の方法で行うことができます:
1. HTML プロパティ値としての JS コード
<input type="button" value="Press me" onclick="alert('thanks');"
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='help';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 サイトの他の関連記事を参照してください。