JavaScript HTML DOM এর সব ধরনের Events: Step by Step ব্যাখ্যা
JavaScript Events মূলত ব্রাউজারে বিভিন্ন একশন যেমন ক্লিক, কীবোর্ড চাপা, মাউস চলাচল, ফর্ম সাবমিশন ইত্যাদি শনাক্ত করে। DOM Events এর মাধ্যমে HTML এলিমেন্টের সাথে এই ইভেন্টগুলো যুক্ত করে ইন্টারঅ্যাকটিভ ওয়েবপেজ তৈরি করা যায়।
Event কি?
যখন ইউজার কিছু করে – যেমন বাটনে ক্লিক করে বা কোনো কিবোর্ড কী প্রেস করে – তখন একটি ইভেন্ট ঘটে। ইভেন্ট শনাক্ত করার জন্য .addEventListener(), onClick, onchange ইত্যাদি ব্যবহার করা হয়।
️ ১. Mouse Events (মাউস সম্পর্কিত ইভেন্ট)
| ইভেন্ট | ব্যাখ্যা |
|---|---|
| onclick | যখন ইউজার এলিমেন্টে ক্লিক করে |
| onmouseover | মাউস এলিমেন্টের উপর গেলে |
| onmouseout | মাউস এলিমেন্ট থেকে চলে গেলে |
<button onclick="alert('আপনি আমাকে ক্লিক করেছেন!')">Click Me</button>
এই উদাহরণে onclick ইভেন্ট ব্যবহার করে বাটনে ক্লিক করলে একটি বার্তা দেখানো হয়।
⌨️ ২. Keyboard Events (কীবোর্ড ইভেন্ট)
onkeydown– কোনো কী চাপলেonkeyup– কী ছাড়লেonkeypress– কী প্রেস করলে (পুরাতন, কিছু ব্রাউজারে deprecated)
<input type="text" onkeydown="console.log('Key Down!')" placeholder="টাইপ করুন">
এই ক্ষেত্রে আপনি যেই কী-ই চাপুন না কেন, onkeydown ইভেন্ট ফায়ার হবে এবং Console-এ বার্তা দেখাবে।
৩. Form Events
onsubmit– ফর্ম সাবমিট করলেonchange– ইনপুট পরিবর্তিত হলেonfocus– ইনপুটে ফোকাস নিলেonblur– ইনপুট থেকে ফোকাস সরালে
<form onsubmit="alert('ফর্ম সাবমিট হয়েছে')">
<input type="text" name="name" required>
<input type="submit" value="Submit">
</form>
এই ফর্মে সাবমিট করলে onsubmit ইভেন্ট ট্রিগার হয়ে অ্যালার্ট দেখাবে।
৪. Window Events
onload– পেজ লোড হলেonresize– উইন্ডো রিসাইজ হলেonscroll– স্ক্রল করলে
<script>
window.onload = function() {
console.log("পেজ লোড সম্পন্ন!");
}
</script>
onload ব্যবহার করে আপনি পেজের সমস্ত কনটেন্ট লোড হয়ে গেলে কোড রান করতে পারেন।
৫. addEventListener ব্যবহার
addEventListener হল আধুনিক ও পেশাদার উপায় ইভেন্ট হ্যান্ডল করার। এতে একাধিক ইভেন্ট একসাথে অ্যাসাইন করা যায়।
<button id="myBtn">Click Me</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
এই কোডে addEventListener() ব্যবহার করে ক্লিক ইভেন্ট অ্যাসাইন করা হয়েছে।
৬. টেবিল: Common Events Chart
| Event | Description |
|---|---|
| onclick | User clicks on element |
| oninput | Text input value is changed |
| onmouseover | Mouse is over the element |
| onchange | Value of an element is changed |
| onload | Page is fully loaded |
৭. রিসোর্স ও প্র্যাকটিস লিংক
উপসংহার
JavaScript DOM Events হলো ওয়েব অ্যাপ্লিকেশনের প্রাণ। এর মাধ্যমে ইউজার ইন্টারঅ্যাকশন হ্যান্ডল করে ওয়েবসাইটকে ইন্টারেকটিভ ও ডায়নামিক করা যায়। প্রতিটি ইভেন্ট নির্দিষ্ট কাজে ব্যবহৃত হয় – আপনি যত প্র্যাকটিস করবেন, তত ভালো বুঝতে পারবেন।