Blog

জাভাস্ক্রিপ্ট ইভেন্টস (JavaScript Events) – সম্পূর্ণ গাইড

জাভাস্ক্রিপ্ট ইভেন্ট হলো এমন কিছু ঘটনা যা ব্যবহারকারীর বা ব্রাউজারের মাধ্যমে ঘটে এবং যার মাধ্যমে ওয়েবপেজে ডায়নামিক আচরণ ঘটানো সম্ভব। উদাহরণস্বরূপ: ক্লিক করা, মাউস মুভ করা, কিবোর্ড চাপা, পেজ লোড হওয়া ইত্যাদি।

১. ইভেন্ট কী?

একটি ইভেন্ট হলো এমন একটি অ্যাকশন যা ব্যবহারকারী কোনো উপাদানের (element) উপর ঘটায়। উদাহরণস্বরূপ: একটি বাটনে ক্লিক করা একটি ক্লিক ইভেন্ট। জাভাস্ক্রিপ্ট দিয়ে আমরা এই ইভেন্টগুলো ধরতে এবং তার ভিত্তিতে কিছু কাজ করতে পারি।

২. ইভেন্ট হ্যান্ডলার কী?

ইভেন্ট হ্যান্ডলার হলো একটি ফাংশন যা নির্দিষ্ট ইভেন্ট ট্রিগার হলে কার্যকর হয়। উদাহরণস্বরূপ, আপনি একটি বাটনে ক্লিক করলে onclick ইভেন্ট হ্যান্ডলার চালু হয়।

৩. ইভেন্ট ধরার তিনটি উপায়

i. HTML অ্যাট্রিবিউটের মাধ্যমে

<button onclick="showMessage()">Click Me</button>

<script>
function showMessage() {
  alert("Button clicked!");
}
</script>

এই উপায়ে onclick অ্যাট্রিবিউটে সরাসরি ফাংশনের নাম দেওয়া হয়। এটা সহজ কিন্তু সবসময় ব্যবহারে পেশাদারভাবে উপযুক্ত নয়।

ii. DOM Element Property দিয়ে

<button id="btn">Click DOM</button>

<script>
document.getElementById("btn").onclick = function() {
  alert("Clicked using DOM property!");
};
</script>

এখানে আমরা জাভাস্ক্রিপ্ট থেকে ইভেন্ট হ্যান্ডলার যুক্ত করেছি। এটা অনেকটা in-line স্টাইল এড়ানোর পদ্ধতি এবং পেশাদারভাবে অধিক গ্রহনযোগ্য।

iii. addEventListener() ব্যবহার করে (সর্বোত্তম পদ্ধতি)

<button id="addBtn">Click Modern</button>

<script>
document.getElementById("addBtn").addEventListener("click", function() {
  alert("Handled using addEventListener!");
});
</script>

addEventListener() হল সবচেয়ে আধুনিক ও কার্যকর পদ্ধতি। এটি একই ইলিমেন্টে একাধিক ইভেন্ট হ্যান্ডলার যুক্ত করতে সক্ষম এবং HTML থেকে জাভাস্ক্রিপ্ট আলাদা রাখে, যা Separation of Concerns বজায় রাখে।

৪. জনপ্রিয় ইভেন্টগুলোর তালিকা

৫. ইভেন্ট অবজেক্ট

প্রত্যেক ইভেন্ট হ্যান্ডলার একটি ইভেন্ট অবজেক্ট পায়, যেটি ইভেন্ট সম্পর্কিত অনেক তথ্য দেয়, যেমন কে ইভেন্টটি ঘটিয়েছে, কখন, কীভাবে ইত্যাদি।

<button id="infoBtn">Show Info</button>

<script>
document.getElementById("infoBtn").addEventListener("click", function(event) {
  alert("Event type: " + event.type + ", Target: " + event.target.tagName);
});
</script>

উপরে, event অবজেক্ট থেকে ইভেন্টের টাইপ এবং টার্গেট এলিমেন্ট সম্পর্কে তথ্য দেখানো হয়েছে।

৬. Event Bubbling এবং Capturing

ইভেন্ট DOM এর উপর দিয়ে ওপরে বা নিচে প্রসারিত হতে পারে। এটি দুটি ধাপে হয়:

• Capturing Phase: ইভেন্ট উপরের দিক থেকে নিচে নামে
• Bubbling Phase: ইভেন্ট নিচ থেকে ওপরে যায়

addEventListener এর তৃতীয় প্যারামিটার দিয়ে আপনি নির্ধারণ করতে পারেন কোন ফেজে হ্যান্ডলার কাজ করবে।

<div id="outer" style="padding: 20px; background-color: #dcdcdc;">
  Outer Div
  <button id="inner">Click Inner</button>
</div>

<script>
document.getElementById("outer").addEventListener("click", function() {
  alert("Outer Div Clicked");
}, false); // bubbling

document.getElementById("inner").addEventListener("click", function() {
  alert("Button Clicked");
}, false);
</script>

এখানে, false মানে ইভেন্ট Bubbling ফেজে হ্যান্ডেল করা হবে।

উপসংহার

JavaScript ইভেন্ট ব্যবস্থাপনা ওয়েব অ্যাপ্লিকেশনকে ইন্টারঅ্যাকটিভ এবং ব্যবহারবান্ধব করে তোলে। addEventListener ব্যবহার করাই সবসময় নিরাপদ এবং উন্নত পদ্ধতি, কারণ এটি কোডের পরিচ্ছন্নতা ও নিয়ন্ত্রণ বাড়ায়।