The hashchange event is utilized to detect modifications in the URL that begin with the hashtag. The hash symbol (#) appears either at the beginning of the URL or follows it to transition from one link to another.
Syntax
The subsequent event is implemented in HTML through the script tag. We can observe the event alongside the function designed for modifying the hash link.
<body onhashchange = "functionHandler(event)">
//write code.
<script>
Function functionHandler(event){
//write javascript code.
}
</script>
</body>
Examples
The subsequent examples illustrate the details of the event after implementing the hashchange event alongside various functionalities.
Example 1
The fundamental operation of the hash change event involves utilizing the location.hash event through JavaScript capabilities. When the hash segment of the URL transitions from one value to another, we can trigger an alert message to notify us of this change.
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
</head>
<body onhashchange = "functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<button onclick="changehashUrlPart()">Try it</button>
<script>
// Using the location.hash property to change the url part
function changehashUrlPart() {
location.hash = "bodytag";
var x_hash = location.hash;
document.getElementById("demos").innerHTML = "The anchor part is now: " + x_hash;
}
function functionHandler(evt) {
var msg = "Hash Changes with the URL! \n"
+ "event.newURL= "+ evt.newURL ;
alert(msg);
}
</script>
</body>
</html>
Output
The provided data illustrates the results generated by the hashchange event handler function.
Example 2
The subsequent example demonstrates the utilization of a hashchange event with various hash URLs within a single page. In this instance, we leverage the id along with its corresponding reference for the hashchange event. The function implemented on the body tag is designed to execute for every alteration in the URL.
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
function functionHandler(evt) {
var msg = "Hash Changes with the URL! \n"
alert(msg);
}
</script>
</head>
<body onhashchange="functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
||
<a href="#Tutorial3">Go to Tutorial 3</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 3 -->
<a id="Tutorial3"></a>
<h3>Tutorial 3</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>
Output
The information illustrates the results generated by the hashchange event handler function.
Example 3
The example presented below demonstrates the utilization of a hashchange event with various hash URLs on a single page. It illustrates how the current URL and the previous URL are altered within the same page context. By leveraging the hashchange event, we can detect modifications to the URL resulting from the different hash values.
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
function functionHandler(evt) {
var msg = "Hash Changes with the URL! \n"
+ "event.newURL= "+ evt.newURL +"\n"
+ "event.oldURL= "+ evt.oldURL ;
alert(msg);
document.getElementById("demos").innerHTML = msg;
}
</script>
</head>
<body onhashchange="functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>
Output
The information illustrates the results generated by the hashchange event handler function.
Example4
The subsequent example demonstrates the use of the document hash location to modify values. By employing the click function, we can observe the URL of the document.
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
</style>
</head>
<body onhashchange = "functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"> Event Uses with Document Hash Location </p>
<button onclick="changehashUrl()">Try it</button>
<script>
// Using the location.hash property to change the url part
function changehashUrl() {
document.location.hash = "clickFun";
}
function functionHandler(evt) {
var msg = "Hash Changes with the URL! \n";
msg += "The current document location: " + document.location + "\n";
msg += "The current hash URL: " + document.location.hash;
alert(msg);
}
</script>
</body>
</html>
Output
The information illustrates the results generated by the hashchange event handler function.
Example 5
The subsequent example illustrates the utilization of a hashchange event alongside various hash URLs within a single page. It demonstrates the implementation of the addEventListener method in conjunction with the hashchange event. This event operates in association with a specific function. Whenever the hash portion of the URL is modified, the function generates and presents the output accordingly.
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
window.addEventListener("hashchange", myFunction);
function myFunction() {
document.getElementById("demos").innerHTML = "The the URL hash part has changed!";
}
</script>
</head>
<body id="bodies">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>
Output
The information illustrates the results produced by the hashchange event function.
Example 6
The fundamental hashchange event operates in conjunction with the window event through JavaScript capabilities. We can retrieve the data following a URL change by utilizing the "window.onhashchange" function.
<!DOCTYPE html>
<html>
<body>
<h4> JavaSCript HashChangeEvent API </h4>
<button onclick="changehashPart()">Test</button>
<p id="demos"></p>
<p id="demos1"></p>
<script>
function changehashPart() {
location.hash = "section";
var x_var = location.hash;
document.getElementById("demos").innerHTML = "The URL part is now: " + x_var;
}
window.onhashchange = myhashFunction;
function myhashFunction() {
document.getElementById("demos1").innerHTML = "The Hash URL has changed!";
}
</script>
</body>
</html>
Output
The information illustrates the results generated by the hashchange event function.
Conclusion
The events function across various URLs and hash links within a single page. This capability assists in tracking and managing the modifications to links effectively.