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

伊谢尔伦
リリース: 2017-07-22 17:18:09
オリジナル
1585 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!