JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのonunloadイベントの使い方をわかりやすく解説

onunloadイベントとは？

onunloadイベントは、ページがアンロード（別のページへの移動や再読み込み）されるタイミングで発生するイベントです。ユーザーがページを離れる瞬間に、何らかの処理を実行したい場合に利用されます。

例えば、ページを閉じる際にメッセージを表示したり、ログを出力したりするといった使い方が可能です。ただし、ブラウザによってはポップアップ表示が制限されるなど、期待どおりに動作しないケースもある点に注意しましょう。

onunloadイベントの実装例

以下のコードでは、body要素にonunload属性を設定し、ページがアンロードされたときに関数newFunc()を呼び出しています。

<!DOCTYPE html>
<html>
   <body onunload="newFunc()">
      <p>ページを閉じると何が起こるか確認してみましょう！</p>
      <p>※このイベントは環境によって予期しない結果になることがあります。</p>
      <script>
          function newFunc() {
             alert("Thank you!");
          }
      </script>
   </body>
</html>

コードのポイント

  • onunload属性を<body>タグに直接記述することで、ページ遷移・更新時にnewFunc()が実行されます。
  • 関数内ではalert()を使って「Thank you!」というメッセージを表示しています。

注意点と補足

近年のモバイルブラウザでは、パフォーマンスやセキュリティの観点からonunloadイベントが正しく発火しないことがあります。その場合は、より信頼性の高いpagehideイベントやvisibilitychangeイベントの使用が推奨されています。

また、ユーザーに確認ダイアログを表示してページ移動を防ぎたい場合は、onunloadではなくbeforeunloadイベントを使用します。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのevery()メソッドとは？使い方とサンプルコードをわかりやすく解説

    JavaScriptの配列（Array）メソッドである every() は、配列内のすべての要素が、指定した関数によるテスト条件を満たしているかどうかを判定するメソッドです。 判定結果はブール値（真偽値）として返されます。 すべての要素が条件を満たす場合 → true 1つでも条件を満たさない要素がある場合 → false every()メソッドのパラメータ every()メソッドでは、以下の2つの引数を使用できます。 callback − 各要素に対して実行されるテスト用の関数です。この関数が false を返すと、その時点で処理が中断され、every()全体が false を返します