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

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

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

🎜>

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

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

< ;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』を参照してください。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。