JavaScriptイベントモデル例 分析_JavaScriptスキル

この記事の例では、JavaScript イベント モデルの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. イベントモデル

バブリングイベント: イベントはリーフノードから祖先ノードに沿ってルートノードに伝播されます
イベントのキャプチャ: バブリングイベントとは対照的に、DOM ツリーの最上位要素から最も正確な要素まで
DOM 標準イベント モデル: DOM 標準は、バブリング イベントとキャプチャ イベントの両方をサポートします。まず、キャプチャ タイプ、次にバブリング配信の組み合わせであると言えます。

2. イベントオブジェクト

IE ブラウザでは、イベント オブジェクトはウィンドウの属性です。DOM 標準では、イベントはイベント処理関数に唯一のパラメータとして渡される必要があります。

互換性のあるイベント オブジェクトを取得します:

function(event){ 
  //event 是作为DOM标准的参数传入处理函数 
 event = 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标准 
  event.stopPropagation(); 
  else 
  event.cancelBubble = true; //IE标准 
} 

イベント配信キャンセル後のデフォルト処理

function someHandler(event){ 
  event = event || window.event; 
  if(event.preventDefault) //DOM标准 
  event. preventDefault (); 
  else 
  event.returnValue = true; //IE标准 
}

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。