JavaScriptウィンドウイベント

1. DOMContentLoaded: 最初の HTML ドキュメントが完全にロードされ、解析されたときにトリガーされます。

2. 読み込み: ページ全体とそのすべてのリソース (画像やスタイルシートなど) の読み込みが完了するとトリガーされます。

3. beforeunload: ウィンドウまたはフレームがアンロードされる前にトリガーされ、通常、現在のページから離れるかどうかをユーザーに確認するために使用されます。

4. アンロード: ウィンドウまたはフレームがアンロードされた後にトリガーされます。

5. サイズ変更: ウィンドウまたはフレームのサイズが変更されるとトリガーされます。

JavaScript は、ウィンドウ (ブラウザウィンドウ) に関連するイベントを多数提供しており、これらのイベントを使用してウィンドウのステータスや操作を検出し、応答することができます。

1. DOMContentLoaded: 最初の HTML ドキュメントが完全にロードされ、解析されたときにトリガーされます。

イベント DOMContentLoaded は、HTML ドキュメントが完全にロードされて解析された後、つまり DOM ツリーが構築され、すべての HTML 要素にアクセスできるようになった後にトリガーされます。このイベントの使用シナリオは通常、ページが読み込まれた後に初期化操作を実行したり、イベントハンドラーをバインドしたり、その他の DOM 関連操作を実行したりすることです。

DOMContentLoaded イベントを使用して初期化操作を実行する方法を示す簡単な例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <title>DOM Content Loaded Example</title>
  <script>
    document.addEventListener('DOMContentLoaded', function(event) {
      // DOM内容加载完成后执行的操作
      var heading = document.querySelector('h1');
      heading.style.color = 'blue';
      heading.textContent = 'DOM Content Loaded';
    });
  </script>
</head>
<body>
  <h1>Example Heading</h1>
  <p>This is an example paragraph.</p>
</body>
</html>

上記の例では、DOM コンテンツがロードされた後に DOMContentLoaded イベントリスナーがトリガーされ、ページ内の h1 要素のテキストコンテンツを「DOM Content Loaded」に変更し、その色を青に設定します。この操作は、すべてのリソース (画像など) が読み込まれるのを待たずに、ページが読み込まれるとすぐに実行されます。

DOMContentLoaded イベントを使用すると、DOM 関連の操作を処理するときにドキュメントの基本構造が適切に配置されていることを確認でき、ユーザーエクスペリエンスが向上します。

2. 読み込み: ページ全体とそのすべてのリソース (画像やスタイルシートなど) の読み込みが完了するとトリガーされます。

ページ全体とそのすべてのリソース (画像、スタイルシート、スクリプトなど) が読み込まれた後に、load イベントがトリガーされます。このイベントの使用シナリオは通常、ページが完全に読み込まれた後に、ページコンテンツの初期化、イベントハンドラーのバインド、ページ読み込みの完了に関連するその他のタスクの実行など、いくつかの操作を実行することです。

以下は、load イベントを使用していくつかの操作を実行する方法を示す簡単な例です。

<!DOCTYPE html>
<html>
<head>
  <title>Load Event Example</title>
  <script>
    window.addEventListener('load', function(event) {
      // 页面加载完成后执行的操作
      var heading = document.querySelector('h1');
      heading.style.color = 'red';
      heading.textContent = 'Page Loaded';
    });
  </script>
</head>
<body>
  <h1>Example Heading</h1>
  <p>This is an example paragraph.</p>
</body>
</html>

上記の例では、ページ全体とそのすべてのリソースが読み込まれた後に読み込みイベントリスナーがトリガーされ、ページ内の h1 要素のテキストコンテンツが「ページが読み込まれました」に変更され、その色がに設定されます。赤。

ロードイベントを使用すると、ページの読み込み完了後に必要なタスクを処理しながら、ページ内のすべてのリソースが確実に読み込まれ、より完全で信頼性の高い操作が提供されます。

3. beforeunload: ウィンドウまたはフレームがアンロードされる前にトリガーされ、通常、現在のページから離れるかどうかをユーザーに確認するために使用されます。

beforeunload イベントは、ユーザーが現在のページを離れる前にトリガーされ、ユーザーがページを閉じるかページから移動する前に、一部の操作を実行したり、確認プロンプトを表示してユーザーの意図を確認するために使用できます。

以下は、beforeunload イベントを使用して確認プロンプトを提供する方法を示す簡単な例です。

<!DOCTYPE html>
<html>
<head>
  <title>Beforeunload Event Example</title>
  <script>
    window.addEventListener('beforeunload', function(event) {
      // 提示用户确认离开页面
      event.returnValue = 'Are you sure you want to leave this page?';
    });
  </script>
</head>
<body>
  <h1>Example Heading</h1>
  <p>This is an example paragraph.</p>
</body>
</html>

上記の例では、ユーザーがページを閉じるかページから移動する前に beforeunload イベントリスナーがトリガーされ、確認プロンプトとして文字列を使用するようにevent.returnValue プロパティが設定されています。ユーザーがページを閉じるか終了しようとすると、ブラウザはダイアログボックスをポップアップ表示し、プロンプトメッセージを表示し、確認またはキャンセルするオプションを提供します。

beforeunload イベントを使用すると、ページを閉じる前、またはページから移動する前に、ユーザーに確認するかどうかを尋ねることができ、誤ってページを離れたり、未保存の変更が失われたりすることを防ぎます。ブラウザのセキュリティ制限により、beforeunload イベントでブロック操作を実行することはできませんが、ユーザーに確認プロンプトを表示することはできることに注意してください。

4. アンロード: ウィンドウまたはフレームがアンロードされた後にトリガーされます。

アンロードイベントは、ユーザーが現在のページを離れるときにトリガーされ、クリーンアップ操作を実行したり、ページを離れる直前にユーザーが正しいエクスペリエンスを確実に得られるように追加のプロンプトを提供したりするために使用できます。

以下は、アンロードイベントを使用していくつかの操作を実行する方法を示す簡単な例です。

<!DOCTYPE html>
<html>
<head>
  <title>Unload Event Example</title>
  <script>
    window.addEventListener('unload', function(event) {
      // 执行清理操作或提供额外的提示
      alert('Are you sure you want to leave this page?');
    });
  </script>
</head>
<body>
  <h1>Example Heading</h1>
  <p>This is an example paragraph.</p>
</body>
</html>

上記の例では、ユーザーが現在のページを離れるとアンロードイベントリスナーがトリガーされ、ページを離れるかどうかをユーザーに尋ねるアラートボックスが表示されます。

アンロードイベントを使用すると、ユーザーデータの保存、リソースのクリーンアップ、追加の確認など、ユーザーがページを離れる前に必要なアクションを実行できます。ブラウザのセキュリティ制限のため、アンロードイベントではブロック操作を実行したり、ナビゲーションをキャンセルしたりすることはできませんが、ユーザーにいくつかのプロンプト情報を表示することはできます。

5. サイズ変更: ウィンドウまたはフレームのサイズが変更されるとトリガーされます。

サイズ変更イベントはウィンドウサイズが変更されるとトリガーされ、ウィンドウサイズの変更に応答して対応する操作を実行するために使用できます。このイベントは通常、ページレイアウトを調整したり、さまざまなウィンドウサイズに合わせて要素の寸法を再計算したりするために使用されます。

以下は、size イベントを使用してページレイアウトを調整する方法を示す簡単な例です。

<!DOCTYPE html>
<html>
<head>
  <title>Resize Event Example</title>
  <style>
    .container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: lightblue;
    }
    
    .content {
      font-size: 24px;
      padding: 20px;
      background-color: white;
      border: 2px solid black;
    }
  </style>
  <script>
    window.addEventListener('resize', function() {
      // 当窗口大小改变时，调整页面布局
      var container = document.querySelector('.container');
      var content = document.querySelector('.content');
      container.style.height = window.innerHeight + 'px';
      content.textContent = 'Window width: ' + window.innerWidth + 'px, height: ' + window.innerHeight + 'px';
    });
  </script>
</head>
<body>
  <div class="container">
    <div class="content">Window width: 0px, height: 0px</div>
  </div>
</body>
</html>

上記の例では、ウィンドウサイズが変更されたときにサイズ変更イベントリスナーがトリガーされ、ページレイアウトを調整する関数を呼び出します。ウィンドウサイズが変更されると、ページ内のコンテナ要素がウィンドウの新しいサイズに調整され、表示ウィンドウの幅と高さが更新されます。

サイズ変更イベントを使用すると、ページがさまざまなサイズのウィンドウに適応し、ウィンドウサイズが変更されたときにそれに応じて処理できるように、応答性の高いレイアウトを実装できます。これは、応答性の高い Web ページまたはアプリケーションを開発する場合に非常に役立ちます。

6. スクロール: スクロールバーがスクロールするとトリガーされます。

スクロールイベントは、ページがスクロールするとトリガーされ、ページスクロールイベントをリッスンし、対応する操作を実行するために使用できます。このイベントは通常、スクロール効果、コンテンツの遅延読み込み、またはスクロール位置のリアルタイム監視を実現するために使用されます。

以下は、スクロールイベントを使用してスクロール効果を実現する方法を示す簡単な例です。

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Event Example</title>
  <style>
    body {
      height: 2000px;
    }
    
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: lightblue;
      padding: 20px;
      text-align: center;
      font-size: 24px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    
    .content {
      margin-top: 100px;
      text-align: center;
      font-size: 18px;
      color: gray;
    }
  </style>
  <script>
    window.addEventListener('scroll', function() {
      // 监听页面滚动事件
      var header = document.querySelector('.header');
      var content = document.querySelector('.content');
      
      if (window.scrollY > 100) {
        // 当滚动超过100像素时，添加特定样式
        header.classList.add('scrolled');
        content.textContent = 'Scrolling...';
      } else {
        // 当滚动小于等于100像素时，移除特定样式
        header.classList.remove('scrolled');
        content.textContent = 'Keep scrolling...';
      }
    });
  </script>
</head>
<body>
  <div class="header">
    Header
  </div>
  
  <div class="content">
    Keep scrolling...
  </div>
</body>
</html>

上記の例では、ページがスクロールされるとスクロールイベントリスナーがトリガーされ、スクロール位置に基づいてページ要素のスタイルを変更します。ページが 100 ピクセルを超えてスクロールすると、特定のクラス名がヘッダー要素に追加され、対応するテキストコンテンツが更新されて表示されます。

スクロールイベントを使用すると、固定ナビゲーションバー、コンテンツの遅延読み込み、無限スクロールなど、スクロール関連のさまざまな効果を実現できます。このイベントは、ページのスクロールを操作する機能を提供し、スクロール位置に基づいてさまざまなアクションやスタイルの変更をトリガーできるようにします。