JavaScript HTML DOM EventListener – একটি পরিপূর্ণ বাংলা টিউটোরিয়াল
JavaScript-এর একটি গুরুত্বপূর্ণ ফিচার হলো EventListener। এটি ব্যবহার করে আপনি HTML উপাদানে ইউজার ইন্টারঅ্যাকশনের প্রতিক্রিয়া হিসেবে কিছু কার্যকলাপ ঘটাতে পারেন। উদাহরণস্বরূপ, একটি বাটনে ক্লিক করার পর কোন একটি ফাংশন চালু করা।
এই টিউটোরিয়ালে আমরা বিস্তারিতভাবে জানবো JavaScript HTML DOM EventListener কীভাবে কাজ করে, কিভাবে এটিকে ব্যবহার করে আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভ ফিচার যোগ করতে পারবেন।
EventListener কি?
EventListener হলো JavaScript-এর একটি মেথড যা DOM (Document Object Model) এ যোগ করা হয় একটি নির্দিষ্ট ইভেন্টের জন্য। অর্থাৎ, আপনি HTML এলিমেন্টে একটি ইভেন্ট (যেমন: click, mouseover, change) যোগ করতে পারবেন এবং সেই ইভেন্ট ট্রিগার হলে JavaScript ফাংশন কল হবে।
Basic Syntax:
element.addEventListener("event", functionName);
এখানে:
- element: HTML DOM এলিমেন্ট (যেমন button)
- event: আপনি যেই ইভেন্ট শুনতে চান (যেমন “click”)
- functionName: সেই ফাংশন যা ইভেন্ট ট্রিগার হলে চালু হবে
উদাহরণ: ক্লিক ইভেন্ট ব্যবহার
চলুন একটা সাধারণ উদাহরণ দেখি যেখানে একটি বাটনে ক্লিক করলে মেসেজ দেখাবে:
<button id="myBtn">এখানে ক্লিক করুন</button>
document.getElementById(“myBtn”).addEventListener(“click”, function() {
alert(“আপনি বাটনে ক্লিক করেছেন!”);
});
</script>
একাধিক ইভেন্ট একসাথে ব্যবহার
একই এলিমেন্টে একাধিক ইভেন্টListener ব্যবহার করা যায়।
let myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = “yellow”;
});
myDiv.style.backgroundColor = “white”;
});
ইভেন্ট রিমুভ করার পদ্ধতি
আপনি চাইলে ইভেন্ট রিমুভও করতে পারবেন:
function greetUser() {
alert("Hello!");
}
btn.addEventListener(“click”, greetUser);
EventListener ব্যবহার করার কিছু সুবিধা
| সুবিধা | বর্ণনা |
|---|---|
| Separation of Code | HTML থেকে JavaScript আলাদা রাখা যায় |
| Multiple Listeners | একই এলিমেন্টে একাধিক ইভেন্ট লিসেনার অ্যাড করা যায় |
| Reusability | একই ফাংশন অনেক ইভেন্টে ব্যবহার করা যায় |
উপসংহার
addEventListener() হলো এমন একটি শক্তিশালী টুল যার মাধ্যমে আপনি আপনার ওয়েবসাইটে বিভিন্ন ইন্টারঅ্যাকশন অ্যাড করতে পারেন। এটি শুধু ওয়েব ডেভেলপমেন্টকে আরও প্রাণবন্ত করে না, বরং কোড ব্যবস্থাপনাও সহজ করে তোলে। আশা করি এই টিউটোরিয়ালটি আপনার জন্য উপকারী হয়েছে।