এই অধ্যায়ে আমরা JavaScript ইভেন্ট সম্পর্কে আগে যা শিখেছি তা আবার রিভিউ করবো এবং আরও কিছু প্র্যাকটিস উদাহরণসহ শিখবো কীভাবে ইভেন্ট ব্যবহার করে ওয়েবপেজকে ইন্টারঅ্যাকটিভ করা যায়।
১. ইভেন্ট কী?
ইভেন্ট হলো ওয়েবপেজে কোনো কাজ বা ঘটনা (event) যা ব্যবহারকারী বা ব্রাউজার ঘটায়, যেমন: ক্লিক করা, মাউস ওভার, কী প্রেস করা ইত্যাদি।
২. ইভেন্ট লিসেনার (Event Listener) কী?
ইভেন্ট লিসেনার হলো এমন একটি ফাংশন যা কোনো ইভেন্ট ঘটলে চালানো হয়।
৩. ইভেন্ট হ্যান্ডলার যোগ করার উপায়
(ক) HTML এ সরাসরি
<button onclick="alert('ক্লিক হয়েছে!')">ক্লিক করো</button>
(খ) JavaScript দিয়ে addEventListener()
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
alert('ক্লিক হয়েছে!');
});
৪. জনপ্রিয় ইভেন্টের উদাহরণ
| ইভেন্ট | বর্ণনা |
|---|---|
| click | মাউস ক্লিক |
| mouseover | মাউস কার্সার এলিমেন্টে আসা |
| mouseout | মাউস কার্সার এলিমেন্ট থেকে যাওয়া |
| keydown | কোন কী চাপা |
| keyup | কী ছাড়া |
| submit | ফর্ম সাবমিট |
| change | ইনপুট ভ্যালু পরিবর্তন |
৫. উদাহরণ: বাটন ক্লিক করলে টেক্সট পরিবর্তন
<button id="btn">ক্লিক করো</button>
<p id="text">এই টেক্সট পরিবর্তিত হবে</p>
<script>
let btn = document.getElementById('btn');
let text = document.getElementById('text');
btn.addEventListener('click', function() {
text.textContent = "টেক্সট পরিবর্তন হয়েছে!";
});
</script>
৬. ইভেন্ট অবজেক্ট (Event Object)
ইভেন্ট হ্যান্ডলারে একটি অবজেক্ট পাস হয় যা ইভেন্ট সম্পর্কে বিস্তারিত তথ্য দেয়।
btn.addEventListener('click', function(event) {
console.log(event.type); // আউটপুট: click
console.log(event.target); // যে এলিমেন্টে ক্লিক হয়েছে
});
৭. উদাহরণ: ইনপুটে কী চাপা হলে কনসোলে দেখানো
<input type="text" id="input">
<script>
let input = document.getElementById('input');
input.addEventListener('keydown', function(event) {
console.log("আপনি কী চাপলেন: " + event.key);
});
</script>
৮. ইভেন্ট ডেলিগেশন (Event Delegation)
যখন অনেক এলিমেন্ট থাকে, তখন প্যারেন্ট এলিমেন্টে ইভেন্ট লিসেনার যোগ করা হয়। এতে মেমোরি বাঁচে ও কোড সহজ হয়।
document.getElementById('parent').addEventListener('click', function(event) {
if(event.target && event.target.matches('button.childBtn')) {
console.log('চাইল্ড বাটনে ক্লিক');
}
});
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
ইভেন্ট ও ইভেন্ট লিসেনারের ধারণা
-
ইভেন্ট যুক্ত করার বিভিন্ন পদ্ধতি
-
ইভেন্ট অবজেক্ট কীভাবে ব্যবহার করবেন
-
ইভেন্ট ডেলিগেশন কি এবং কখন ব্যবহার করবেন
পরবর্তী অধ্যায়:
অধ্যায় ২৬: JavaScript Form Validation
লিখুন: “অধ্যায় ২৬ শুরু করো” — তাহলে শিখবো ফর্মে ইউজার ইনপুট কিভাবে যাচাই করবেন।