5

選択したイベントにリスナーをアタッチし、どのバージョンの一般的なブラウザーでも機能するコードを作成する必要があります。いくつかの検索を行った後、次の機能を見つけました。

function addListener(event, thefunction)
{
    if(window.addEventListener)
    {
        //All browsers, except IE before version 9.
        window.addEventListener(event, thefunction, false);
    } 
    else if(window.attachEvent)
    {
        //IE before version 9.
        window.attachEvent(event, thefunction);
    }
}

非常にシンプルで、一目瞭然のようです。

DOMContentLoadedIE（AFAIK）のどのバージョンもそれを認識しないため、イベントに問題がある可能性があり、開発者はonreadystatechange代わりに使用する義務があります。Internet Explorer 9 までは、この問題を解決するのもかなり簡単に思えましたelse if(window.attachEvent)。

event = (event == 'DOMContentLoaded') ? 'onreadystatechange' : "on" + event;

この部分は Internet Explorer のどのバージョンでも常に起動され、この行はイベント名の単純な変換を提供したため、正しいものが常に使用されました。

しかし、Internet Explorer 9 (およびそれ以降) についてはどうでしょうか。マイクロソフトはattachEvent、addEventListener. onreadystatechangeしかし、 に変わりませんDOMContentLoaded。

上記の行はwindow.addEventListener部分的に使用できません。これは、他のブラウザーでもイベントに書き換えDOMContentLoadedられonreadystatechange、そこで失敗するためDOMContentLoadedです。

したがって、この問題を解決する唯一の方法は、ブラウザー検出 (タイプとバージョン) をwindow.addEventListener一部に追加することです。スクリプトが IE 9 以降を処理していることを検出した場合、イベント名を からDOMContentLoadedに書き換え、onreadystatechange他のイベント名を補足します。 、onIE に必要)、および他のブラウザの場合、イベント名は変更されませんか?

DOMContentLoadedまたは、テストしたばかりのように、IE 8でも起動されていないため、間違っている可能性がonreadystatechangeあります(最初のものはFF / Chromeで正しく起動します)。

そして、jQuery の.on()関数 (または類似のもの) はどうですか? のクロスブラウザアタッチをサポートしているかどうか、誰もが知っているDOMContentLoadedので、この特定の種類のイベントが、使用しているブラウザまたはバージョンに関係なく、スクリプトによってキャッチされることを確認できますか?

4

2 に答える 2

5

IE9 は DOMContentLoaded をサポートしています。ここを参照してください。

addEventListenerこれを念頭に置いて、サポートされている場合は DOMContentLoaded もサポートされているという仮定に基づいて作業することができます。

(* 誰かが Opera 8 または Safari 3.0 を使用してあなたのページにたどり着いた場合を除き、おそらくありそうもないことです)。

jQuery に関しては、サポートされている場合は DOMContentLoaded に従いますが、それ以外の場合は、DOM ツリーを繰り返しチェックしてdocument.bodyまだ存在するかどうかを確認することを含む、DOM 対応を検出する歴史的な手段にフォールバックします。したがって、DOM 対応のハンドラーを使用できます。

$(function() {

使用する必要はありませんon()。

この回答でjQueryがそれを行う方法の詳細。

于 2012-07-17T11:13:01.970 に答える
3

DOMContentLoadedaddEventListenerは IE9 以降でネイティブにサポートされており、IE9 でも実装された W3C 標準の方法で接続できます。

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM ready');
}, false);

これは、最新のすべてのブラウザーとバージョン 9 以降の IE で動作します。

jQuery 1.x は、IE6+ およびその他の最新のブラウザーと互換性があります。jQuery は、 DOM Ready ハンドラーを介して IE6-8 のサポートをシミングすることにより、DOM Ready イベントのクロスブラウザーをフックできます。

$(function() {
    //DOM has loaded, put your code here
});

.on()event delegationを提供しますが、それは質問とは関係ありません。

于 2012-07-17T11:35:06.870 に答える