JavaScript におけるいくつかの珍しいバインディング イベント

目次

1.フルスクリーン変更イベント

2. ページ非表示イベント

3.ページショーイベント

4. ハッシュチェンジイベント

5. オンラインイベント

6. オフラインイベント

7. ポップステートイベント

8. デバイスモーションイベント

9. デバイス方向イベント


1.フルスクリーン変更イベント

fullscreenchange イベントは、要素が全画面モードに入るとき、または全画面モードから出るときに発生するブラウザ イベントです。これは、全画面状態の変化を検出する方法を提供し、適切なアクションを実行したり、全画面モードでユーザー インターフェイスを更新したりするために使用できます。

fullscreenchange イベントは、ユーザーが全画面機能を使用してブラウザ ウィンドウを全画面モードに切り替えたとき (たとえば、F11 キーを押したとき)、またはフルスクリーン メソッドを呼び出して指定された要素が全画面モードに切り替えられたときにトリガーされます。 JavaScript を介した画面 API (requestFullscreen() など)。

同時に、ユーザーが全画面モードを終了するか、JavaScript を介して全画面 API を呼び出して要素を全画面モードから終了すると、fullscreenchange イベントもトリガーされます。

サンプルコードは次のようになります。

document.addEventListener("fullscreenchange", function(event) {
  if (document.fullscreenElement) {
    // 元素进入全屏模式
    console.log("进入全屏模式");
    // 执行相应的操作或更新界面
  } else {
    // 元素退出全屏模式
    console.log("退出全屏模式");
    // 执行相应的操作或更新界面
  }
});

2. ページ非表示イベント

`pagehide` イベントは、ページが非表示になったときに発生するブラウザ イベントです。これはページのアンロード プロセスの一部であり、ユーザーが現在のタブから離れるかブラウザを閉じるとトリガーされます。「pagehide」イベントをリッスンすることで、ユーザーがページを離れたタイミングを捕捉し、適切なアクションを実行できます。

`pagehide` イベントは `unload` イベントに似ていますが、いくつかの違いがあります。主な違いは、「pagehide」イベントがキャンセル可能なイベントであることです。つまり、イベントのデフォルトの動作をキャンセルすることでページが非表示になるのを防ぐことができます。対照的に、「アンロード」イベントはキャンセルできず、ページのアンロードを防ぐことはできません。

以下は、「pagehide」イベントを使用する基本的なフローです。

1. `addEventListener` メソッドを使用して、`pagehide` イベントを `window` オブジェクトまたは `document` オブジェクトにバインドします。
2. イベントハンドラーでは、未保存データの保存や統計情報の送信など、ページ非表示時に必要な操作を実行できます。
3. ページが非表示になるのを防ぐ必要がある場合は、イベント オブジェクトの `preventDefault()` メソッドを呼び出します。

サンプルコードは次のようになります。

window.addEventListener("pagehide", function(event) {
  // 执行页面隐藏时的操作
  console.log("页面即将隐藏");
  
  // 如果需要阻止页面的隐藏,取消事件的默认行为
  event.preventDefault();
});

`pagehide` イベントが発生するとページは非表示になるため、イベント ハンドラーで実行される操作はユーザー エクスペリエンスへの影響を避けるために軽量である必要があることに注意してください。

`pagehide` イベントを使用すると、ユーザーがページを離れる前の瞬間をキャプチャし、必要に応じて適切なアクションを実行できます。これは、データの保存、リソースのクリーニング、統計の送信などに役立ちます。

3.ページショーイベント

`pageshow` イベントは、ページが表示されたときに発生するブラウザ イベントです。これはページの読み込みおよび表示プロセスの一部であり、ユーザーが新しいタブを開いたとき、現在のタブに戻ったとき、またはページを更新したときにトリガーされます。`pageshow` イベントは、表示されているページのタイミングをキャプチャし、対応する操作を実行する方法を提供します。

`pageshow` イベントは、ページが完全に読み込まれたときや DOMContentLoaded イベントが発生したときではなく、ページが表示されたときに発生するという点で、`DOMContentLoaded` や `load` イベントとは異なります。

以下は、「pageshow」イベントを使用する基本的なフローです。

1. `addEventListener` メソッドを使用して、`pageshow` イベントを `window` オブジェクトまたは `document` オブジェクトにバインドします。
2. イベント ハンドラーでは、状態の復元やデータのロードなど、ページの表示時に実行する必要がある操作を実行できます。

サンプルコードは次のようになります。

window.addEventListener("pageshow", function(event) {
  // 执行页面展示时的操作
  console.log("页面已展示");
});

ページが更新されたときに「pageshow」イベントもトリガーされることに注意してください。したがって、イベント ハンドラーで実行されるアクションは、ページが更新されたときに正しく動作するように、反復可能である必要があります。

`pageshow` イベントを使用すると、ページが表示される瞬間をキャプチャし、適切なアクションを実行できます。これは、状態の復元、データのロード、またはページ表示に関連するその他の操作の実行に役立ちます。

4. ハッシュチェンジイベント

「hashchange」イベントは、URL のフラグメント識別子 (つまり、ハッシュ値) が変更されたときに発生するブラウザ イベントです。フラグメント識別子は、URL の「#」記号に続く部分です。「hashchange」イベントは、URL ハッシュ値の変更をリッスンする方法を提供し、ハッシュ値が変更されたときに適切なアクションを実行できるようにします。

Web アプリケーションでは、フロントエンド ルーティングやページ状態管理を実装するために URL フラグメント識別子がよく使用されます。「hashchange」イベントは、ユーザーがページ内のリンクをクリックするか、URL のハッシュ値を変更するその他の操作を実行するとトリガーされます。

以下は、「hashchange」イベントを使用する基本的なフローです。

1. `addEventListener` メソッドを使用して、`hashchange` イベントを `window` オブジェクトにバインドします。
2. イベント ハンドラーでは、`location.hash` プロパティを通じて現在のハッシュ値を取得し、対応する操作を実行できます。

サンプルコードは次のようになります。

window.addEventListener("hashchange", function(event) {
  // 获取当前的哈希值
  var newHash = location.hash;
  
  // 执行相应的操作,例如根据哈希值加载不同的内容或触发前端路由逻辑
  console.log("哈希值发生变化:" + newHash);
});

「hashchange」イベントをリッスンすることで、URL ハッシュ値の変更をリアルタイムで取得し、ページ コンテンツの更新、ビューの切り替え、フロントエンド ルーティング ナビゲーションの実行など、必要に応じて対応する操作を実行できます。

「hashchange」イベントは URL ハッシュ値の変更のみを監視でき、他の URL (プロトコル、ドメイン名、パスなど) の変更は監視できないことに注意してください。URL 全体の変更をリッスンするには、`popstate` イベントと History API を使用できます。

5. オンラインイベント

「オンライン」イベントは、デバイスのネットワーク接続ステータスがオフラインからオンラインに変化したときにトリガーされるブラウザー イベントです。これは、デバイスのネットワーク接続ステータスを検出し、デバイスがネットワークに再接続したときに適切なアクションを実行するために使用されます。

デバイスがオフライン (ネットワーク接続なし) の場合、ネットワーク接続が復元されると、ブラウザは「online」 イベントをトリガーして、デバイスがネットワークに再接続したことを JavaScript コードに通知します。

「オンライン」イベントを使用する基本的な流れは次のとおりです。

1. `addEventListener` メソッドを使用して、`online` イベントを `window` オブジェクトにバインドします。
2. イベント ハンドラーでは、データのロード、リクエストの送信など、デバイスがネットワークに再接続するときに実行する必要がある操作を実行できます。

サンプルコードは次のようになります。

window.addEventListener("online", function(event) {
  // 设备已重新连接到网络
  console.log("设备已在线");
});

「オンライン」イベントをリッスンすることで、デバイスがネットワークに再接続する機会を捉え、適切なアクションを実行できます。これは、オフライン中にデータをキャッシュしたり、デバイスがネットワークに再接続したことをユーザーに警告したりする場合に役立ちます。

「オンライン」イベントは、デバイスのオフラインからオンラインへの状態変化のみを検出でき、デバイスがオンラインのままかどうかは検出できないことに注意してください。デバイスのオンライン ステータスを検出する必要がある場合は、`navigator.onLine` プロパティを使用できます。「navigator.onLine」が「true」の場合はデバイスが現在オンラインであることを意味し、「false」の場合はデバイスが現在オフラインであることを意味します。

6. オフラインイベント

「オフライン」イベントは、デバイスのネットワーク接続ステータスがオンラインからオフラインに変化したときにトリガーされるブラウザー イベントです。これは、デバイスのネットワーク接続ステータスを検出し、デバイスがネットワークから切断されたときに適切なアクションを実行するために使用されます。

デバイスがオンライン (ネットワーク接続あり) のときにネットワーク接続が中断されると、ブラウザは「オフライン」イベントをトリガーして、デバイスがオフラインであることを JavaScript コードに通知します。

「オフライン」イベントを使用する基本的なフローは次のとおりです。

1. `addEventListener` メソッドを使用して、`offline` イベントを `window` オブジェクトにバインドします。
2. イベント ハンドラーでは、オフライン ステータス プロンプトの表示、データ アップロードの一時停止など、デバイスがネットワークから切断されたときに実行する必要がある操作を実行できます。

サンプルコードは次のようになります。

window.addEventListener("offline", function(event) {
  // 设备已离线
  console.log("设备已离线");
});

「オフライン」イベントをリッスンすることで、デバイスがネットワークから切断される機会を捉えて、適切なアクションを実行できます。これは、データをオフラインで処理する必要がある場合、またはデバイスがネットワークから切断されたことをユーザーに警告する必要がある場合に役立ちます。

「オフライン」イベントは、デバイスのオンラインからオフラインへの状態変化のみを検出でき、デバイスがオフラインのままかどうかは検出できないことに注意してください。デバイスのオンライン ステータスを検出する必要がある場合は、`navigator.onLine` プロパティを使用できます。「navigator.onLine」が「true」の場合はデバイスが現在オンラインであることを意味し、「false」の場合はデバイスが現在オフラインであることを意味します。

7. ポップステートイベント

`popstate` イベントは、ブラウザの履歴 (つまり、`history.pushState()` または `history.replaceState()` によって変更された URL) が変更されたときにトリガーされる JavaScript のブラウザ イベントです。

通常、これはユーザーがブラウザの「進む」ボタンまたは「戻る」ボタンをクリックしたとき、または JavaScript を通じて `history.back()`、`history.forward()`、`history.go()` メソッドが呼び出されたときにトリガーされます。変更する歴史。「popstate」イベント。

「popstate」イベントは、ブラウザの履歴が変更されたときに開発者がアクションを実行する機会を提供します。たとえば、`popstate` イベントを使用して、ページ コンテンツの更新、データの更新、または URL 変更に関連するその他のアクションを実行できます。

以下は、`popstate` イベントを使用する基本的なフローです。

1. `addEventListener` メソッドを使用して、`popstate` イベントを `window` オブジェクトにバインドします。
2. イベント ハンドラーでは、必要に応じて URL の変更に関連する操作を実行できます。

サンプルコードは次のようになります。

window.addEventListener("popstate", function(event) {
  // 历史记录发生变化
  console.log("历史记录变化");
  // 执行其他操作,如更新页面内容或刷新数据
});

ページが最初にロードされるとき、「popstate」イベントは発生しないことに注意してください。このイベントは、ページがロードされ、履歴の変更が発生した場合にのみ発生します。

さらに、履歴は変更でき、`history.pushState()`、`history.replaceState()`、またはブラウザの進む/戻るボタンを呼び出すことによって `popstate` イベントをトリガーできます。ただし、無限ループの発生を避けるために、「popstate」イベント ハンドラーでこれらのメソッドを再度呼び出さないように注意してください。

8. デバイスモーションイベント

「devicemotion」イベントは、デバイスの物理的な動作状態が変化したときにトリガーされる JavaScript のデバイス イベントです。このイベントは、デバイスの加速度や回転速度などの関連情報を提供し、デバイスの動作ステータスを検出するために使用されます。

デバイスが移動、回転、またはモバイル デバイス上でデバイスを振る、回転、傾けるなどの物理的な動作を受けると、ブラウザは「devicemotion」イベントを生成し、関連データをイベント ハンドラーに渡します。

「devicemotion」イベント オブジェクトには次のプロパティが含まれます。

- `acceleration`: デバイスの加速度を 3 次元座標の形式で表します。つまり、`{ x: 数値、y: 数値、z: 数値 }` です。
- `accelerationincludeGravity`: 重力加速度を含む総加速度を 3 次元座標で表します。
- `rotationRate`: デバイスの回転速度を 3 次元座標で表します。つまり、`{ alpha: 数値、beta: 数値、gamma: 数値 }` です。
- `interval`: `devicemotion` イベントの生成間の時間間隔を示します。

以下は、`devicemotion` イベントを使用する基本的なフローです。

1. `addEventListener` メソッドを使用して、`devicemotion` イベントを `window` オブジェクトにバインドします。
2. イベントハンドラーでは、`event.acceleration`、`event.accelerationincludeGravity`、`event.rotationRate` などのプロパティを通じてデバイスの加速度や回転速度などの情報を取得し、対応する操作を実行できます。

サンプルコードは次のようになります。

window.addEventListener("devicemotion", function(event) {
  // 获取设备的加速度信息
  var acceleration = event.acceleration;
  var accelerationIncludingGravity = event.accelerationIncludingGravity;
  
  // 获取设备的旋转速率信息
  var rotationRate = event.rotationRate;
  
  // 执行其他操作,如根据加速度进行某些动作或旋转等
});

「devicemotion」イベントは頻繁にトリガーされる可能性があり、具体的なトリガー頻度はデバイスとブラウザーの実装に依存することに注意してください。イベントを処理するときに、必要に応じて調整またはフィルタリングするための適切な方法を選択して、頻繁にトリガーされすぎてパフォーマンスに影響を与えることを回避できます。

さらに、「devicemotion」イベントを使用するには、デバイスのサポートとユーザー認証が必要です。モバイル デバイスでは、通常、ユーザーはブラウザがデバイスのモーション センサーにアクセスできるようにする必要があります。

9. デバイス方向イベント

「deviceorientation」イベントは、デバイスの向きが変化したときにトリガーされる JavaScript のデバイス イベントです。このイベントは、デバイスの傾き、回転、方位角などのデバイスの方向情報を提供します。

デバイスの向きを変更したり、モバイル デバイス上でデバイスを回転したりするなど、デバイスが回転、傾き、方向を変更すると、ブラウザは「deviceorientation」イベントを生成し、関連するデータをイベント ハンドラーに渡します。

「deviceorientation」イベント オブジェクトには次のプロパティが含まれます。

- `alpha`: Z 軸を中心としたデバイスの回転角度を 0 ~ 360 度の範囲で示します。
- `beta`: X 軸を中心としたデバイスの傾斜角を -180 度から 180 度の範囲で示します。
- `gamma`: y 軸を中心としたデバイスの傾斜角を -90 度から 90 度の範囲で示します。
- `absolute`: デバイス方向情報が絶対値であるかどうかを示します。「true」の場合は絶対方向情報が提供されることを意味し、「false」の場合は相対方向情報が提供されることを意味します。

以下は、「deviceorientation」イベントを使用する基本的なフローです。

1. `addEventListener` メソッドを使用して、`deviceorientation` イベントを `window` オブジェクトにバインドします。
2. イベント ハンドラーでは、「event.alpha」、「event.beta」、「event.gamma」などのプロパティを通じてデバイスの方向情報を取得し、対応する操作を実行できます。

サンプルコードは次のようになります。

window.addEventListener("deviceorientation", function(event) {
  // 获取设备的方向信息
  var alpha = event.alpha;
  var beta = event.beta;
  var gamma = event.gamma;
  
  // 执行其他操作,如根据方向信息调整页面布局或进行相应的动作等
});

「deviceorientation」イベントは頻繁にトリガーされる可能性があり、具体的なトリガー頻度はデバイスとブラウザーの実装に依存することに注意してください。イベントを処理するときに、必要に応じて調整またはフィルターする適切な方法を選択して、頻繁にトリガーされすぎてパフォーマンスに影響を与えることを回避できます。

さらに、「deviceorientation」イベントを使用するには、デバイスのサポートとユーザー認証が必要です。モバイル デバイスでは、通常、ユーザーはブラウザがデバイスの方向センサーにアクセスできるようにする必要があります。

おすすめ

転載: blog.csdn.net/zhangawei123/article/details/130930135