জেভাস্ক্রিপ্ট এইচটিএমএল ডম ইভেন্ট
- পূর্ববর্তী পৃষ্ঠা ডম অ্যানিমেশন
- পরবর্তী পৃষ্ঠা ডম ইভেন্ট লিস্টেনার
HTML DOM JavaScript-কে HTML ইভেন্টের প্রতিক্রিয়া দেওয়ার অনুমতি দেয়:
ইভেন্টের প্রতিক্রিয়া
JavaScript ইভেন্ট ঘটার সময় কাজ করতে পারে, যেমন ব্যবহারকারী একটি HTML এলিমেন্ট ক্লিক করলে।
ব্যবহারকারী একটি এলিমেন্ট ক্লিক করলে কোড চালু করতে, HTML ইভেন্ট অ্যাট্রিবিউটে JavaScript কোড যোগ করুন:
onclick=JavaScript
HTML ইভেন্টের উদাহরণ:
- ব্যবহারকারী মাউস ক্লিক করলে
- যখন ওয়েবসাইট লোড করা হয়
- যখন চিত্র লোড করা হয়
- যখন মাউস ইলেকট্রনটির উপর চুম্বকিত হয়
- যখন ইনপুট ফিল্ড পরিবর্তন করা হয়
- যখন HTML ফর্ম সমর্থিত হয়
- যখন ব্যবহারকারী কিবোর্ড প্রিন্ট করে
এই উদাহরণে, যখন ব্যবহারকারী <h1> সময়, তার কনটেন্ট পরিবর্তন করা হয়:
উদাহরণ
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML = 'Hello!'">এই টেক্সট ক্লিক করুন!</h1> </body> </html>
এই উদাহরণে, ইভেন্ট হ্যান্ডলার থেকে ফাংশন কল করা হয়:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">এই টেক্সট ক্লিক করুন!</h1>
<script>
function changeText(id) {
id.innerHTML = "Hello:)";
}
</script>
</body>
</html>
HTML ইভেন্ট অ্যাট্রিবিউট
যদি আপনি একটি HTML ইলেকট্রনের সাথে ইভেন্ট সংযুক্ত করতে চান, তবে আপনাকে ইভেন্ট অ্যাট্রিবিউট ব্যবহার করা যেতে পারেন。
উদাহরণ
বাটন ইলেকট্রনের সাথে onclick ইভেন্ট:
<button onclick="displayDate()">চেষ্টা করুন</button>
এই উদাহরণে, displayDate নামের ফাংশনটি বাটন ক্লিক করা হলে চালু হয়。
যুক্ত করা হয় HTML DOM-এর মাধ্যমে ইভেন্ট
HTML DOM আপনাকে HTML ইলেকট্রনে ইভেন্ট সংযুক্ত করার অনুমতি দেয়:
উদাহরণ
বাটন ইলেকট্রনকে নির্দিষ্ট করা onclick ইভেন্ট:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
এই উদাহরণে, displayDate নামের ফাংশনটি id="myBtn" এবং HTML ইলেকট্রন ক্রিয়াকরণ করা হয়েছে。
যখন বাটন ক্লিক করা হয়, তখন ফাংশন চালু হয়。
onload এবং onunload ইভেন্ট
যখন ব্যবহারকারী পৃষ্ঠায় প্রবেশ করে এবং পৃষ্ঠা থেকে প্রস্থান করে, onload এবং onunload ইভেন্ট
onload ইভেন্টটি ব্যবহারকারীর ব্রাউজারের ধরন এবং সংস্করণ নির্ণয় করতে ব্যবহৃত হয়, এবং এই তথ্য ভিত্তিতে পৃষ্ঠার উপযুক্ত সংস্করণ লোড করা হয়。
onload এবং onunload ইভেন্টটি কুকি সংক্রান্ত কাজকর্মকে পরিচালনা করার জন্য ব্যবহৃত হয়。
উদাহরণ
<body onload="checkCookies()">
onchange ইভেন্ট
onchange ইভেন্টটি সাধারণত ইনপুট ফিল্ড রিসাইড সহ ব্যবহৃত হয়。
নিচে একটি উদাহরণ দেওয়া হল, কিভাবে onchange এর উদাহরণ।যখন ব্যবহারকারী ইনপুট ফিল্ডের কনটেন্ট পরিবর্তন করে, upperCase() ফাংশনটি কল করা হয়。
উদাহরণ
<input type="text" id="fname" onchange="upperCase()">
onmouseover এবং onmouseout ইভেন্ট
onmouseover এবং onmouseout ইভেন্টগুলি ব্যবহার করা যেতে পারে, যখন ব্যবহারকারী একটি এইচটিএমএল ইলেকমেন্টের উপর বা তার থেকে বেরিয়ে আসতে চায়
onmousedown, onmouseup এবং onclick ইভেন্ট
onmousedown, onmouseup এবং onclick ইভেন্টগুলি মাউস ক্লিক ইভেন্টকে সম্পূর্ণ করে
প্রথমে, মাউস বাটন ক্লিক হলেonmousedown ইভেন্ট ট্রিগার হয়; তারপর, মাউস বাটন মুক্ত হলেonmouseup ইভেন্ট ট্রিগার হয়; শেষত, মাউস ক্লিক সম্পন্ন হলেonclick ইভেন্ট ট্রিগার হয়
আরও ইনস্ট্যান্স
- onmousedown এবং onmouseup
- মাউস বাটন প্রেস হলে চিত্র পরিবর্তন করে
- onload
- পৃষ্ঠা সম্পূর্ণভাবে লোড হলে অলার্ট বক্স দেখানো হয়
- onfocus
- ইনপুট ফিল্ড ফোকাস হলে এটা ব্যাকগ্রাউন্ড রঙ পরিবর্তন করে
- মাউস ইভেন্ট
- ইলিমেন্টের উপর পয়েন্টার মুভ হলে এটা রঙ পরিবর্তন করে
এইচটিএমএল ডম ইভেন্ট অবজেক্ট রেফারেন্স ম্যানুয়েল
সমস্ত এইচটিএমএল ডম ইভেন্টের তালিকা পাওয়ার জন্য, আমাদের পূর্ণ সাইট এইচটিএমএল ডম ইভেন্ট রেফারেন্স ম্যানুয়েল পরিদর্শন করুন এইচটিএমএল ডম ইভেন্ট অবজেক্ট রেফারেন্স ম্যানুয়েল.
- পূর্ববর্তী পৃষ্ঠা ডম অ্যানিমেশন
- পরবর্তী পৃষ্ঠা ডম ইভেন্ট লিস্টেনার
