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

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

亚连

リリース： 2018-05-21 11:16:05

オリジナル

1061 人が閲覧しました

さまざまなブラウザには 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(&#39;thanks&#39;);};

ログイン後にコピー

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 にプレフィックス

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