HTML DOM HashChangeEvent একটি ইন্টারফেস টাইপ যা সেই ইভেন্টগুলো রিপ্রেজেন্ট করে যেগুলো URL-এর # অংশ পরিবর্তন হলে ফায়ার করে।
প্রপার্টি
HashChangeEvent-এর প্রপার্টিগুলো:
| প্রপার্টি | বিবরণ |
|---|---|
| newURL | হ্যাশ পরিবর্তন হওয়ার পর ডকুমেন্ট URL রিটার্ন করে। |
| oldURL | হ্যাশ পরিবর্তন হওয়ার আগে ডকুমেন্ট URL রিটার্ন করে। |
সিনট্যাক্স
HashChangeEvent-এর সিনট্যাক্স:
event.eventProperty
এখানে, eventProperty উপরের দুটি প্রপার্টির যেকোনো একটি।
উদাহরণ
HashChangeEvent-এর উদাহরণ:
<!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>আউটপুট
এটি নিচের আউটপুট তৈরি করবে:
CHANGE বাটনে ক্লিক করলে:
উপরের উদাহরণে:
CHANGE বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে changeHash() মেথড এক্সিকিউট করবে।
<button onclick="changeHash()">CHANGE</button>
changeHash() মেথড location অবজেক্টের hash প্রপার্টি “NEWHASH”-এ পরিবর্তন করে। location অবজেক্ট আমাদের URL সম্পর্কে তথ্য ধারণ করে:
function changeHash() { location.hash = "NEWHASH"; }হ্যাশ পরিবর্তন होते ही body ট্যাগের সাথে জড়িত onhashchange ইভেন্ট হ্যান্ডলার ফায়ার করে এবং haschange ইভেন্ট অবজেক্ট হিসেবে showChange() ফাংশনে পাস করে:
<body onhashchange="showChange(event)">
showChange() মেথড প্রাপ্ত haschange ইভেন্ট ব্যবহার করে oldURL প্রপার্টি এবং newURL প্রপার্টি id “sample” ওয়ালা প্যারাগ্রাফ এলিমেন্টে দেখায়:
function showChange() { document.getElementById("Sample").innerHTML = "URLটি " + event.oldURL + " থেকে " + event.newURL + "-এ পরিবর্তিত হয়েছে"; } 