この記事では、JavaScriptイベントモデルの使用について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
1。イベントモデル
バブル:イベントは、祖先ノードに沿って葉のノードからルートノードまで上向きに渡されます。
キャプチャ:DOMツリーの上部要素から、バブルイベントの反対側の最も正確な要素まで
DOM標準イベントモデル:DOM Standardは、バブルタイプのイベントとキャプチャ型イベントの両方をサポートしています。まず第一に、2つのキャプチャタイプ、次にバブルタイプの伝送の組み合わせであると言えます。
2。イベントオブジェクト
IEブラウザでは、イベントオブジェクトはウィンドウのプロパティです。 DOM標準では、イベントを一意のパラメーターとしてイベント処理機能に渡す必要があります。
互換性のあるイベントオブジェクトを取得します。
function(event){//イベント処理関数は、dom標準イベント= event?event:window.eventのパラメーターとして渡されます。 }IEでは、イベントのオブジェクトはイベントのsrcelementに含まれていますが、DOM標準には、オブジェクトはターゲットプロパティに含まれています
互換性のあるイベントオブジェクトによって指された要素を取得します。
var target = event.srcelement? event.srcelement:event.target;
前提は、イベントオブジェクトが正しく取得されていることを確認することです
3。イベントリスナー
IEでは、登録されたリスナーは逆順序で実行されます。つまり、登録されたリスナーが最初に実行されます。
Element.Attachevent( 'onclick'、observer); //リスナーelement.detachevent( 'onclick'、observer)を登録//リスナーを削除します
最初のパラメーターはイベント名、2番目はコールバック処理機能です
DOM標準の下:
Element.AddeventListener( 'Click'、Observer、usecapture)element.RemoveEventListener( 'Click'、Observer、usecapture)
最初のパラメーターはイベント名です。「on」のプレフィックスなし、2番目のパラメーターはコールバック処理関数であり、3番目のパラメーターは、コールバック関数がキャプチャ段階で呼び出されるのか、バブルステージで呼び出されるかを示します。デフォルトのtrueはキャプチャステージです
4。イベント配信
ブラウザの互換性のあるイベント配信をキャンセルします
function somehandler(event){event = event || window.event; if(event.stoppropagation)// dom Standard event.stoppropagation(); else event.cancelbubble = true; // IE標準}イベント配信後のデフォルトの処理をキャンセルします
function somehandler(event){event = event || window.event; if(event.preventdefault)// dom標準イベント。 PreventDefault(); else event.returnValue = true; // IE標準}この記事がみんなのJavaScriptプログラミングに役立つことを願っています。