JavaScript BOMの構成と一般的なイベントの詳細な説明

1. 部品

1. BOM とは何ですか?

BOM (ブラウザオブジェクトモデル) は、コンテンツとは独立してブラウザウィンドウと対話するオブジェクトを提供するブラウザオブジェクトモデルです。そのコアオブジェクトはウィンドウです。

BOM は一連の関連オブジェクトで構成され、各オブジェクトは多くのメソッドとプロパティを提供します。

BOM には標準がありません。JavaScript 構文の標準化団体は ECMA で、DOM の標準化団体は W3C です。BOM はもともと Netscape ブラウザ標準の一部でした。

2. BOMの構成

次の図に示すように:

ここに画像の説明を挿入

ウィンドウオブジェクトはブラウザーの最上位オブジェクトであり、2 つの役割を持ちます。

JS がブラウザウィンドウにアクセスするためのインターフェイスです。別のグローバルオブジェクト。グローバルスコープで定義された変数と関数は、ウィンドウオブジェクトのプロパティとメソッドになります。

呼び出し時にウィンドウを省略できます。alert()、prompt() などはすべてウィンドウオブジェクトのメソッドです。

ウィンドウオブジェクトを呼び出して、そのオブジェクトにどのようなプロパティとメソッドがあるかを確認できます。

以下のように表示されます。

コンソールログ(ウィンドウ);

傍受された部分は次のとおりです。

ここに画像の説明を挿入

グローバルスコープで定義された変数と関数は、ウィンドウオブジェクトのプロパティとメソッドになることがわかります。

2. ウィンドウオブジェクトの共通イベント

1. ウィンドウ読み込みイベント

JavaScript の実行メカニズムでは、コードの実行は上から下の順番で実行されることがわかっているので、ボタンにクリックイベントを追加する場合は、次のように、まずボタンを設定し、次にボタンを動作させるしかありません。

<本文>
    <button>クリック</button>
    <スクリプト>
        var btn = document.querySelector('ボタン');
        btn.onclick = 関数(){
            alert('クリックしました!')
        }
    </スクリプト>
</本文>

効果をクリックします:

ここに画像の説明を挿入

バインドされたクリックイベントをページの先頭に配置したい場合、明らかにそれは不可能です。では私たちは何をすべきでしょうか?現時点では、ウィンドウ読み込みイベントを通じてこれを完了できます。

window.onloadはウィンドウ (ページ) の読み込みイベントです。このイベントは、ドキュメントコンテンツ (画像、スクリプトファイル、CSS ファイルなどを含む) が完全に読み込まれたときにトリガーされ、処理関数が呼び出されます。

window.onload = 関数(){}
//またはwindow.addEventListener("load",function(){});

上記の例のように:

<本文>
    <スクリプト>
        window.onload = 関数(){
            var btn = document.querySelector('ボタン');
        btn.onclick = 関数(){
            alert('クリックしました!')
        }
        }
    </スクリプト>
    <button>クリック</button>
</本文>

クリック効果もこの時点で実現できます。

ここに画像の説明を挿入

以下の点に注意してください。

1. window.onloadを使用すると、ページコンテンツがすべて読み込まれた後に onload が処理関数を実行するため、ページ要素の上に JS コードを記述できます。

2. 従来のwindow.onloadイベント登録方法は 1 回しか記述できません。window.onload イベントが複数ある場合は、最後のイベントが使用されます。

3. addEventListener を使用する場合、制限はありません。

この時点でクリックイベントもあり、その操作を要素の前に配置したい場合はどうすればよいでしょうか。

試してみましょう:

 <スクリプト>
        window.onload = 関数(){
            var btn = document.querySelector('ボタン');
        btn.onclick = 関数(){
            alert('もう一度クリックしました!')
        }
    }
        window.onload = 関数(){
           アラート('こんにちは')
        }
    </スクリプト>
    <button>クリック</button>
</本文>

印刷結果はどうなりますか？

ここに画像の説明を挿入

最初のイベントは 2 番目のイベントによって上書きされることがわかります。これは、次のように別の方法で操作できます。

document.addEventListener('DOMContentLoaded',function(){})

コードは次のとおりです:

 <スクリプト>
        document.addEventListener('DOMContentLoaded',function(){
            var btn = document.querySelector('ボタン');
            btn.onclick = 関数(){
                alert('もう一度クリックしました!')
            }
            アラート('こんにちは')
        })
    </スクリプト>
    <button>クリック</button>
</本文>

実行結果は次のとおりです。

ここに画像の説明を挿入

DOMContentLoadedイベントは、スタイルシート、画像、フラッシュなどを除いて、DOM が読み込まれたときにのみ発生します。この方法は、Internet Explorer 9 以降でのみサポートされています。ページに画像が多い場合、ユーザーのアクセスから onload のトリガーまでに時間がかかり、インタラクティブな効果が得られず、ユーザーエクスペリエンスに影響を及ぼします。この場合は、DOMContentLoaded イベントを使用する方が適切です。

2. ウィンドウサイズ調整イベント

多くのウェブサイトでは、ウィンドウのサイズを変更すると、それに応じて内部のコンテンツも変更されます。これはどのように行われるのでしょうか?ここでは、ウィンドウのサイズ変更イベントを使用します。

形式は次のとおりです。

//(1)
window.onresize = 関数(){}
//(2)
ウィンドウにイベントリスナーを追加します("サイズ変更",関数(){});

window.onresize はウィンドウのサイズ変更の読み込みイベントであり、トリガーされると処理関数が呼び出されます。

例えば：

ページ内にボックスがあります。ページの幅が 800 ピクセル未満の場合は、このボックスの色が紫色に変わります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: 赤;
        }
    </スタイル>
</head>
<本文>
    <div></div>
   <スクリプト>
       div = document.querySelector('div')
       window.onresize = 関数(){
           コンソールログ(ウィンドウの内側の幅);
           if(window.innerWidth <= 800){
               div.style.backgroundColor = '緑';
           }
       }
   </スクリプト>
</本文>
</html>

印刷結果は次のとおりです。

ここに画像の説明を挿入