12.イベントモデル

イベントモデル

 

JavaScriptで2つのイベントモデル：DOM0、DOM2。

 

DOM0レベルのイベントモデル

DOM0レベルが早期イベントモデルイベントモデルで、すべてのブラウザがサポートしています。

イベント登録：タイプのような、上の追加イベントの前に：onmouseover属性、onclickの......

リフトイベント：dom.onclick = NULL;

各DOMオブジェクトにのみ発生し、複数のカバレッジを登録し、イベントの同じタイプを登録することができ、唯一の最後のイベントは、機能を実行しました。

 

DOM2イベントモデルレベル

DOM2イベントモデルグレードは、IE8比較的新しいイベントモデルであり、以下にサポートされていません。

イベント登録：

addEventListener（タイプ、FN、useCaptureは）イベント監視

 

パラメータ：type ----イベントタイプ、例えば：クリックしてください

          FN ----イベントハンドラ

          真または偽useCaptureブール値----

         （真の表現のイベントのキャプチャ、虚偽の表現イベントバブリング）

互換性のあるブラウザであるために、第三のパラメータは、通常、falseに設定されています

リフトイベント：にremoveEventListener（タイプ、FN、useCaptureは）

各DOMオブジェクトがイベントカバレッジの複数の同じタイプが発生しません登録することができ、それは各イベント関数の実行が続きます。

 

IEのみバブリングイベントをサポートしているため、イベントのキャプチャがサポートされていないので、addEventListenerを（）メソッドをサポートしていません。

IE別の関数attachEvent（タイプ、FN）を提供

パラメータ：type ----イベントタイプ、例えば：onclickの

          FN ----イベントハンドラ

          いいえ三番目のパラメータありません

リフトイベント：detachEvent（タイプ、FN）

 

パッケージイベントリスナー関数（互換）

 

 

イベントストリーム

 

イベントフロー：イベント、イベントの実行シーケンスの流れ。

 

子要素は、親要素が同じイベントに定義されているとき、私たちはonclickイベントを定義するなど、

あなたは子要素をクリックすると、親要素のonclickのイベントがトリガされます。

 

JSは、この連続発生またはイベントバブリングイベントキャプチャのメカニズムの中で述べています。

 

IE：内部から入射して、最も正確なトリガイベントは、オブジェクト（ターゲット）開始から、次に最も正確なオブジェクト（文書）がトリガされ、すなわち、イベントバブリング

 

Netscapeは：入射外側から内側に、トリガイベントは、次いで、最も正確な目標（ターゲット）がトリガされ、最も不正確なオブジェクト（文書）からの開始イベントキャプチャ

 

W3C進行中と、任意W3Cイベントモデルでは、最初のバブリング段階に、イベント取得段を入力し、両方。

 

 

イベントバブリング、またはイベントのキャプチャ機能が広がっているかどうか！

 

イベントの伝播を停止します

するevent.stopPropagation（）   // W3C

event.cancelBubble =真   // IE

するevent.stopPropagation？するevent.stopPropagation（）：（event.cancelBubble =真）。

 

 

イベントのデリゲート

 

イベントは何です：人気の話onclickの、onmouseover属性、れるonmouseoutので、イベントがあります。

手数料は何か：この事件は、要素の一部に適用されている可能性がありますが、このイベントを完了するために、加算他の要素を持っていること。

 

原理：イベント伝播特性を利用。

具体的には、イベントの目的は、イベントデリゲート自体がイベントを処理しませんが、その親要素にイベント処理を委任するために、あるいは文書を完成させることです。

 

利点：

1.パフォーマンスと効率を向上させます

2.メモリフットプリントを節約し、イベント登録を削減

3.再びイベントを登録することなく、次の要素

......

 

 

マウスホイールイベント

 

非Firefoxのブラウザで

マウスホイールイベント：onmousewheel

例：

box.onmousewheel =関数（EV）{

     VARイベント= EV || window.event。

     警告（event.wheelDelta）。

}。

 

 

Firefoxブラウザで

マウスホイールイベント：のDOMMouseScroll

例：

box.addEventListener（ 'のDOMMouseScroll'、関数（EV）{

     警告（ev.detail）。

}、false）を