Javascript HashChangeEvent Tutorial
View more Tutorials:
Hash is "Anchor part" of an URL. It tells the browser to scroll the browser scrollbar to display the content area corresponding to Hash.

Ví dụ với Hash:

hash-example.html
<!DOCTYPE html> <html> <head> <title>Hash Example</title> <meta charset="UTF-8"> <style> .content { margin-top: 30px; padding: 5px; border: 1px solid #ddd; } </style> </head> <body> <a href="#chapter1">Go to Chapter 1</a> || <a href="#chapter2">Go to Chapter 2</a> || <a href="#chapter3">Go to Chapter 3</a> <div class="content"> <!-- Anchor 1 --> <a id="chapter1"></a> <h3>Chapter 1</h3> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> <!-- Anchor 2 --> <a id="chapter2"></a> <h3>Chapter 2</h3> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> <!-- Anchor 3 --> <a id="chapter3"></a> <h3>Chapter 3</h3> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> </div> <p id="log-div"></p> </body> </html>
HashChangeEvent
HashChangeEvent is a sub- interface of interface Event. It represents the event that occurs when the "Anchor part" on the URL is changed.
Events:
Event | Description |
---|---|
hashchange | Event occurs when the "Anchor part" on the URL is changed. |
Properties:
Property | Description |
---|---|
newURL | Returns the URL of the document, after the Hash has been changed |
oldURL | Returns the URL of the document, before the Hash was changed |
Basically, the newURL, oldURL properties of HashChangeEvent are supported by all browsers excluding IE.
Example with HashChangeEvent:
hashchangeevents-example.html
<!DOCTYPE html> <html> <head> <title>HashChangeEvent Example</title> <meta charset="UTF-8"> <style> .content { margin-top: 30px; padding: 5px; border: 1px solid #ddd; } </style> <script> function hashchangeHandler(evt) { var msg = "Hash Change! \n" + "event.newURL= "+ evt.newURL +"\n" + "event.oldURL= "+ evt.oldURL ; alert(msg); } </script> </head> <body onhashchange="hashchangeHandler(event)"> <a href="#chapter1">Go to Chapter 1</a> || <a href="#chapter2">Go to Chapter 2</a> || <a href="#chapter3">Go to Chapter 3</a> <div class="content"> <!-- Anchor 1 --> <a id="chapter1"></a> <h3>Chapter 1</h3> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> Chapter 1 content <br/> <!-- Anchor 2 --> <a id="chapter2"></a> <h3>Chapter 2</h3> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> Chapter 2 content <br/> <!-- Anchor 3 --> <a id="chapter3"></a> <h3>Chapter 3</h3> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> Chapter 3 content <br/> </div> </body> </html>