IEブラウザでのJavaScriptバブリングイベントの応答レベルとFirefox_javascriptスキルについて-jsチュートリアル-php.cn

IEブラウザでのJavaScriptバブリングイベントの応答レベルとFirefox_javascriptスキルについて

WBOY

リリース： 2016-05-16 18:18:41

オリジナル

885 人が閲覧しました

ページにそのようなタグがあるとします:

コードをコピーしますコードは次のとおりです:

🎜>

次に、このスクリプトをページに追加します:

コードをコピーしますコードは次のとおりです:

< ;script type="text/javascript"> 

window.onload=function(){ //各レベルの要素にイベントをバインドします 
 window.onclick= func; 
ドキュメント.onclick=func; 
 document.body.onclick=func; //レスポンス関数、レスポンスを出力 要素 
 document.getElementById("timeDiv").innerHTML =this "
" 
} 

 
Firefox でページを開き、 IE 8、タグ testDiv (灰色の四角をクリック) の結果は次のとおりです: 

Firefox での結果

IE 8 の結果
ご覧のとおり、2 つの結果は同じではありません。いったいなぜこのようなことが起こっているのでしょうか?

これは、IE と Firefox のバブリングイベントのサポートレベルの違いが原因であることが判明しました。 (バブリングイベントについてよくわからない場合は、関連情報を先に確認してください。)

(1) IE 6 以降のバージョンでは、バブリングイベントがサポートするレベルはドキュメントオブジェクトに達します。

(2) Firefox (正確には Mozilla 1.0 以降) では、バブリングイベントのサポートがウィンドウオブジェクトに拡張されました。

その結果、上記のイベント応答結果は異なります。

また、面白いことがありますが、お気づきですか？イベントターゲットの応答シーケンスです。 (バブリングイベントの応答シーケンス...少しナンセンスに思えます) Firefox が 2 つのイベントモデル、つまりイベントのキャプチャとバブリングイベントを同時にサポートしていることはわかっています。ここでは、イベント処理関数がバブリング段階で動作していることが明らかです。つまり、イベントハンドラー関数の属性に値を直接割り当てる従来の方法を使用する場合、たとえば次のようになります。

コードをコピー

コードは次のとおりです: document.body.onclick=func;

イベント ハンドラーがイベントのバブリング フェーズに追加されます。 

上記は IE と Firefox におけるバブリングイベント応答レベルの紹介ですが、同時に従来のイベント処理関数の直接割り当てのデフォルト処理も紹介しています。詳細な説明については、Nicholas C. Zakas 著『Javascript Advanced Programming』を参照してください。 

追伸：上記の内容はあくまで個人的な読書メモですので、間違いや漏れがございましたらご指摘ください。同時に、より多くのフロントエンド愛好家があなたの経験を共有できることを願っています。