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

HTML DOMのHashChangeEventとは？プロパティと使い方をわかりやすく解説

HashChangeEventとは

HTML DOMのHashChangeEventは、URLの「#」以降の部分（ハッシュ）が変更されたときに発生するイベントを表すインターフェースです。ページ全体を再読み込みすることなく、ハッシュの変化を検知して処理を実行できるため、シングルページアプリケーション（SPA）などでも活用されています。

HashChangeEventのプロパティ

HashChangeEventには、以下の2つの主要なプロパティが用意されています。

プロパティ説明
newURLハッシュ変更後のドキュメントのURLを返します。
oldURLハッシュ変更前のドキュメントのURLを返します。

構文

HashChangeEventのプロパティへのアクセスは、次の構文で行います。

event.eventProperty

ここでeventPropertyには、上記の「newURL」または「oldURL」のいずれかを指定します。

サンプルコード

実際にHashChangeEventを使った例を見てみましょう。ボタンをクリックするとURLのハッシュが変更され、その変化が画面に表示されるシンプルなデモです。

<!DOCTYPE html>
<html>
<body onhashchange="showChange(event)">
<h1>HashChangeEventのサンプル</h1>
<p>下のボタンをクリックしてハッシュを変更してください</p>
<button onclick="changeHash()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeHash() {
        location.hash = "NEWHASH";
    }
    function showChange() {
        document.getElementById("Sample").innerHTML = "URLが " + event.oldURL + " から " + event.newURL + " に変更されました";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、まずボタンと案内テキストが表示されます。

HTML DOMのHashChangeEventとは？プロパティと使い方をわかりやすく解説

CHANGEボタンをクリックすると、次のようにURLの変更内容が表示されます。

HTML DOMのHashChangeEventとは？プロパティと使い方をわかりやすく解説

コードの解説

このサンプルコードの動作を順番に見ていきましょう。

1. ボタンの設置

まず、ユーザーがクリックするとchangeHash()メソッドを実行するボタンを作成しています。

<button onclick="changeHash()">CHANGE</button>

2. ハッシュの変更処理

changeHash()メソッドでは、locationオブジェクトのhashプロパティを「NEWHASH」に書き換えています。locationオブジェクトは、現在のページのURL情報を持つオブジェクトです。

function changeHash() {
    location.hash = "NEWHASH";
}

3. イベントの発火

ハッシュが変更されると同時に、bodyタグに関連付けられたonhashchangeイベントハンドラーが発火し、hashchangeイベントをオブジェクトとしてshowChange()関数に渡します。

<body onhashchange="showChange(event)">

4. 変更内容の表示

showChange()メソッドでは、受け取ったhashchangeイベントを使い、oldURLプロパティとnewURLプロパティの値を、idが「Sample」の段落要素（pタグ）に出力しています。

function showChange() {
    document.getElementById("Sample").innerHTML = "URLが " + event.oldURL + " から " + event.newURL + " に変更されました";
}

まとめ

HashChangeEventを使うことで、URLのハッシュ部分の変更を簡単に検知できます。oldURLとnewURLの2つのプロパティにより、変更前後のURLを取得できるため、ハッシュベースの画面遷移や状態管理を実装する際に非常に便利なイベントです。

  1. HTML DOM TouchEventのtouchesプロパティとは？使い方とサンプルコードを解説

    TouchEvent touchesプロパティとはHTML DOMのTouchEventにおけるtouchesプロパティは、タッチ面（タッチスクリーンなど）上で発生したすべての接触ポイント（コンタクトポイント）のリストに対応するTouchListオブジェクトを返します。注意：指定されたノード、またはその子ノード上でタッチが発生した場合、その後に続くタッチ操作は、同じノード上で発生していなくてもカウント対象になります。構文TouchListオブジェクトを取得するための構文は以下の通りです。event.touches補足：本記事のタッチイベントのサンプルコードは、モバイル端末やタッチ操作対応デバイ

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種