JavaScriptイベントモデル、オブジェクト、モニタリング、配信コード例の詳細な説明

1. イベント モデル

バブリング イベント (バブリング): イベントはリーフ ノードから祖先ノードに沿ってルート ノードまで渡されます
イベントのキャプチャ (キャプチャ): DOM ツリーの最上位要素から最も正確な要素まで, バブリング イベントとは対照的に、
DOM 標準イベント モデル: DOM 標準は、バブリング イベントとキャプチャ イベントの両方をサポートしています。最初にキャプチャ タイプ、次にバブリング配信

II、イベントの 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イベントモデル、オブジェクト、モニタリング、配信コード例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。