Javascript Bangla Tutorial-46 : Dom Event | Event Object | Onchange Event

Javascript Bangla Tutorial-46 : Dom Event | Event Object | Onchange Event

Welcome to the 46th installment of our Bangla JavaScript tutorial series! In this tutorial, we will delve into the fascinating world of "Dom Event," "Event Object," and "Onchange Event" in JavaScript. Events play a crucial role in web development, enabling us to respond to user interactions and create dynamic web applications. Understanding how to work with events will empower you to build more interactive and engaging websites.

Dom Event

ডোম ইভেন্ট হলো জাভাস্ক্রিপ্টের একটি মহত্ত্বপূর্ণ বৈশিষ্ট্য যা ওয়েব উন্নতির জন্য ব্যবহার করা হয়। ডোম (ডকুমেন্ট অবজেক্ট মডেল) ইলিমেন্টগুলির মধ্যে একটি ক্রিয়া প্রকাশ করে যখন ব্যবহারকারী একটি ইভেন্ট প্রসারণ করে যেমন ক্লিক, ডাবল-ক্লিক, মাউস ওভার, কীবোর্ড ইত্যাদি। আপনি ডোম ইভেন্টগুলি ধরার জন্য বিভিন্ন ইভেন্ট লিসেনার ফাংশন বা হ্যান্ডলার ফাংশন ব্যবহার করতে পারেন।

Event Object

ইভেন্ট অবজেক্ট জাভাস্ক্রিপ্টের একটি বিশেষ অবজেক্ট যা ডোম ইভেন্ট প্রসারণের সময় তৈরি হয়। এটি বিশেষভাবে এই ইভেন্টের সাথে সম্পর্কিত তথ্য সরবরাহ করে, যেমন ইভেন্টের ধরণ, স্ক্রিনের কোয়ার্ডিনেট, কীবোর্ড কোড, ইভেন্ট টার্গেট ইত্যাদি। এই তথ্য ব্যবহার করে আপনি ডোম ইভেন্টের প্রসারণ সম্পর্কিত কাজ করতে পারেন।

Onchange Event

অনচেঞ্জ ইভেন্ট জাভাস্ক্রিপ্টের একটি বিশেষ ইভেন্ট যা ইনপুট এলিমেন্টের মান পরিবর্তন হলে সক্রিয় হয়। ধরা যাক, আপনি একটি ইনপুট বক্স বা ড্রপডাউন লিস্ট থেকে একটি মান বেছে নিলে, সেই সময় অনচেঞ্জ ইভেন্ট সক্রিয় হয়। এটি সাধারণভাবে ফর্ম সাবমিট না হওয়ার জন্য ব্যবহৃত হয় যাতে ব্যবহারকারী সাবমিট পৃষ্ঠার পুনঃনির্দেশ না করে পরবর্তী কাজ করতে পারে।

ডোম ইভেন্ট হ্যান্ডলিং

ডোম ইভেন্ট হ্যান্ডলিং জাভাস্ক্রিপ্টে ইভেন্ট প্রসারণের প্রক্রিয়াগুলির ব্যবস্থা করার একটি প্রক্রিয়া বা পদ্ধতি। ব্যবহারকারীর নিকটবর্তী ইন্ট্রাকশনের মাধ্যমে এটি সক্রিয় হয় এবং প্রোগ্রাম বা স্ক্রিপ্ট বা ফাংশন সম্পর্কিত প্রক্রিয়া অনুসরণ করতে পারে। ডোম ইভেন্ট হ্যান্ডলিং ব্যবহারকারীর ইন্ট্রাকশনের সাথে সম্পর্কিত কাজ করতে ব্যবহৃত হয়, যেমন একটি বাটনের ক্লিক করা, একটি ইনপুট বক্সে কী টাইপ করা, একটি মাউস ওভার করা ইত্যাদি।

ডোম ইভেন্ট হ্যান্ডলিং এর প্রক্রিয়া

জাভাস্ক্রিপ্টে, ডোম ইভেন্ট হ্যান্ডলিং এর মূল প্রক্রিয়া হলো কোনো ইভেন্ট সম্পর্কিত একটি ইভেন্ট লিসেনার ফাংশনে সংযোজন করা। ইভেন্ট লিসেনার হলো একটি ফাংশন যা ব্যবহারকারীর কোনো ইভেন্ট প্রসারণ করলে সক্রিয় হয়। এটি বিশেষভাবে প্রকার করে বৈদ্যুতিক বা এক্সটার্নাল ইভেন্ট হ্যান্ডলার হতে পারে।

// বৈদ্যুতিক ইভেন্ট হ্যান্ডলার
document.getElementById("myButton").addEventListener("click", myFunction);

function myFunction() {
  alert("আপনি বাটনে ক্লিক করেছেন!");
}

// এক্সটার্নাল ইভেন্ট হ্যান্ডলার
function myFunction() {
  alert("আপনি বাটনে ক্লিক করেছেন!");
}

document.getElementById("myButton").addEventListener("click", myFunction);

Event Object ব্যবহার করা

ডোম ইভেন্ট লিসেনার ফাংশনে প্যারামিটার হিসেবে ইভেন্ট অবজেক্ট পাওয়া যায়, যা ইভেন্টের তথ্য সরবরাহ করে। ইভেন্ট অবজেক্টের মধ্যে এইভেন্টের সম্পর্কিত তথ্য থাকে, যেমন ইভেন্টের ধরণ, টার্গেট ইত্যাদি। আমরা এই তথ্য ব্যবহার করে এইভেন্টের সাথে সম্পর্কিত কাজ করতে পারি।

document.getElementById("myInput").addEventListener("change", function(event) {
  alert("আপনি ইনপুট এলিমেন্টের মান পরিবর্তন করেছেন!");
  console.log(event.target.value); // পরিবর্তিত মান অ্যাক্সেস করা
});

ইভেন্ট বাতিল করা

ইভেন্ট লিসেনার ফাংশনের মাধ্যমে এইভেন্ট প্রসারণ বাতিল করা সম্ভব। এটি সাধারণভাবে preventDefault() মেথড ব্যবহার করে করা হয়। এটি ব্যবহারকারীর অপেক্ষার মধ্যে কিছু কাজ বাতিল করতে সাহায্য করে, যেমন ফর্ম সাবমিট বাতিল করা, লিঙ্কের ডিফল্ট প্রসারণ বাতিল করা ইত্যাদি।

document.getElementById("myLink").addEventListener("click", function(event) {
  event.preventDefault(); // লিঙ্কের ডিফল্ট প্রসারণ বাতিল করা
  alert("আপনি লিঙ্কে ক্লিক করেছেন, কিন্তু কিছু করা হয়নি!");
});

স্টপ প্রসারণ বাতিল করা

ইভেন্ট প্রসারণ বাতিল করা হলো একটি ইভেন্টের স্ট্যান্ডার্ড বাবজোড় ব্রাউজার ক্রিয়াকলাপ বন্ধ করা। ইভেন্ট প্রসারণ বাতিল করার জন্য stopPropagation() মেথড ব্যবহার করা হয়। এটি কোনো একই ইভেন্টের একাধিক লিসেনার প্রসারণ করার ব্যাপারে সহায়ক হয়।

document.getElementById("myButton").addEventListener("click", function(event) {
  alert("আপনি বাটনে ক্লিক করেছেন!");
  event.stopPropagation(); // ইভেন্ট প্রসারণ বাতিল করা
});

ডেটা স্যাংক্রোনাইজেশন

কিছু সময়ে, ব্যবহারকারী কতৃক গৃহীত ডেটা অপডেট করার সময়, ডেটা স্যাংক্রোনাইজেশন খুবই জরুরি হতে পারে। ইভেন্ট অবজেক্টের change প্রপার্টি ব্যবহার করে আপনি এই ডেটা স্যাংক্রোনাইজেশন করতে পারেন।

document.getElementById("myInput").addEventListener("change", function(event) {
  const newValue = event.target.value;
  updateData(newValue); // ডেটা স্যাংক্রোনাইজেশন
});

ডোম ইভেন্ট বাবজোড়

ডোম ইভেন্ট বাবজোড় হলো একটি গুরুত্বপূর্ণ ধরণের বাবজোড় যা ডোম এলিমেন্ট এর অন্তর্গত এইভেন্ট গুলির অনুমতি প্রদান করে। যেমন, আপনি কিছু গোপন তথ্য সম্পর্কে যদি ক্লিক করে থাকেন, তবে সেই ডিভাইসে কিছু এলিমেন্টের ওপর ক্লিক করলে তার তথ্য আপনার পাসে দেখানো হয় না। এটি গুরুত্বপূর্ণ কারণে এটি সুস্থ সাইটের প্রচার ও উন্নতির জন্য ব্যবহৃত হয়।

Event Delegation

ইভেন্ট ডেলিগেশন হলো ডোম ইভেন্ট বাবজোড় এর একটি গুরুত্বপূর্ণ প্রক্রিয়া যা ডোকুমেন্টের প্যারেন্ট এলিমেন্টে এইভেন্ট লিসেনার সেট করে এলিমেন্টের কোন শিশু এলিমেন্ট এর ওপর প্রসারিত ইভেন্ট গুলি ক্যাচ করে। এটি একাধিক এলিমেন্টের জন্য ইভেন্ট লিসেনার সেট করার প্রয়োজন কমিয়ে তুলে ধরে।

ইভেন্ট ডেলিগেশন এর সুবিধা

ইভেন্ট ডেলিগেশন এর সুবিধাগুলি নিম্নলিখিত:

1. প্রফর্ম্যান্স: এটি সাধারণভাবে একাধিক এলিমেন্টের জন্য একটি ইভেন্ট লিসেনার সেট করার প্রয়োজন কমিয়ে তুলে ধরে এবং বিশেষভাবে পাত্র প্রকারের সাইটে এটি প্রচুর গুণগত হয়।

2. ডাইনামিক ইলিমেন্ট সেট: ইভেন্ট ডেলিগেশন এর মাধ্যমে ডাইনামিকভাবে যুক্ত এলিমেন্টের জন্য ইভেন্ট লিসেনার সেট করা যায়, যা এই ইভেন্টের জন্য সহজ এবং ভাল সুবিধা সৃষ্টি করে।

3. প্রকৃত বাবজোড়: ইভেন্ট ডেলিগেশন এর সাথে, আপনি অন্তর্গত এলিমেন্টের যেকোনো শিশু এলিমেন্টের উপর ক্লিক করতে পারেন এবং প্রকৃত বাবজোড় সৃষ্টি করতে পারেন।

  
Item 1
  
Item 2
  
Item 3
  
Item 4

document.getElementById("parentList").addEventListener("click", function(event) {
  if (event.target.nodeName === "LI") {
    alert("আপনি " + event.target.innerText + " এলিমেন্টে ক্লিক করেছেন!");
  }
});

Event Bubbling

ইভেন্ট বাবলিং হলো ডোম ইভেন্ট এর একটি ব্যবহারকারী ইন্টারফেস যা একটি শিশু এলিমেন্ট থেকে একটি প্যারেন্ট এলিমেন্ট এ একটি ইভেন্ট এর উপর প্রসারণ দেয়। ইভেন্ট বাবলিং ক্রিয়াকলাপ গুলি মূলত ডোম এলিমেন্ট গুলির মধ্যে চালিত হয়।

ইভেন্ট বাবলিং এর সুবিধা

ইভেন্ট বাবলিং এর সুবিধাগুলি নিম্নলিখিত:

1. প্রবল কার্যক্রম: ইভেন্ট বাবলিং এর সাথে বামে থেকে ডানে প্রবল কার্যক্রম সৃষ্টি করা যায়।

2. বাবল এর মধ্যে ইভেন্ট গুলি ক্যাচ করা: ইভেন্ট বাবলিং এর মাধ্যমে আপনি একটি এলিমেন্টে একাধিক ইভেন্ট লিসেনার সেট করতে পারেন এবং সমস্ত ইভেন্ট গুলি একসাথে ক্যাচ করতে পারেন।

3. কোডের সাজেশন করা সুবিধা: ইভেন্ট বাবলিং এর মাধ্যমে কোড গুলি সাজানো এবং পরিচ্ছন্ন করা যায় এবং এটি কোড রিড যোগ্য করে।

Event Capturing

ইভেন্ট ক্যাপচারিং হলো ডোম ইভেন্ট এর একটি অপসারণ প্রক্রিয়া যা একটি প্যারেন্ট এলিমেন্ট থেকে একটি শিশু এলিমেন্ট এ একটি ইভেন্ট এর উপর প্রসারণ দেয়। ইভেন্ট ক্যাপচারিং ক্রিয়াকলাপ গুলি মূলত ডোম এলিমেন্ট গুলির মধ্যে চালিত হয়।

ইভেন্ট ক্যাপচারিং এর সুবিধা

ইভেন্ট ক্যাপচারিং এর সুবিধাগুলি নিম্নলিখিত:

1. প্রবল কার্যক্রম: ইভেন্ট ক্যাপচারিং এর সাথে ডানে থেকে বামে প্রবল কার্যক্রম সৃষ্টি করা যায়।

2. ক্যাপচার এর মধ্যে ইভেন্ট গুলি ক্যাচ করা: ইভেন্ট ক্যাপচারিং এর মাধ্যমে আপনি একটি এলিমেন্টে একাধিক ইভেন্ট লিসেনার সেট করতে পারেন এবং সমস্ত ইভেন্ট গুলি একসাথে ক্যাচ করতে পারেন।

3. কোডের সাজেশন করা সুবিধা: ইভেন্ট ক্যাপচারিং এর মাধ্যমে কোড গুলি সাজানো এবং পরিচ্ছন্ন করা যায় এবং এটি কোড রিড যোগ্য করে।

সাধারণ ইভেন্ট এর উপর বেজার

সাধারণ ইভেন্ট এর উপর বেজার হলো একটি বৈশিষ্ট্য যা ইভেন্ট বাবজোড় বা ইভেন্ট ক্যাপচারিং ক্রিয়াকলাপ গুলি প্রয়োজন হয় না। সাধারণভাবে, ইভেন্ট বাবজোড় এবং ইভেন্ট ক্যাপচারিং প্রয়োজন হয় যখন আপনি একটি বৃহত্তর এলিমেন্ট এর উপর একটি ইভেন্ট লিসেনার সেট করতে চান।

Event Object ব্যবহার করা

ডোম ইভেন্ট লিসেনার ফাংশনে প্যারামিটার হিসেবে ইভেন্ট অবজেক্ট পাওয়া যায়, যা ইভেন্টের তথ্য সরবরাহ করে। ইভেন্ট অবজেক্টের মধ্যে এইভেন্টের সম্পর্কিত তথ্য থাকে, যেমন ইভেন্টের ধরণ, টার্গেট, কোয়েরি সিলেক্টর ইত্যাদি। আমরা এই তথ্য ব্যবহার করে এইভেন্টের সাথে সম্পর্কিত কাজ করতে পারি।

ইভেন্ট অবজেক্টের প্রোপার্টি

কিছু গুরুত্বপূর্ণ ইভেন্ট অবজেক্টের প্রোপার্টি গুলি নিম্নলিখিত:

• type: ইভেন্টের ধরণ (উদাহরণস্বরূপ, click, change, keydown, ইত্যাদি)।
• target: ইভেন্টের টার্গেট এলিমেন্ট।
• currentTarget: ইভেন্ট ক্যাপচারিং এর সময় প্রসারিত এলিমেন্ট।
• bubbles: ইভেন্ট বাবলিং এর ক্রিয়াকলাপ সম্পর্কে সত্য বা মিথ্যা হিসেবে প্রকাশ করে।
• cancelable: ইভেন্ট বাতিল করা যাবে কি না সম্পর্কে সত্য বা মিথ্যা হিসেবে প্রকাশ করে।

ইভেন্ট অবজেক্ট ব্যবহার করে ডোম ইভেন্ট হ্যান্ডলিং এর প্রক্রিয়া প্রদর্শন করে এবং ব্যবহারকারীর ইন্ট্রাকশনের সাথে সম্পর্কিত কাজ করতে সাহায্য করে।

ইভেন্ট বাতিল করা

ডোম ইভেন্ট লিসেনার ফাংশনের মাধ্যমে ইভেন্ট প্রসারণ বাতিল করা সম্ভব। এটি সাধারণভাবে preventDefault() মেথড ব্যবহার করে করা হয়। এটি ব্যবহারকারীর অপেক্ষার মধ্যে কিছু কাজ বাতিল করতে সাহায্য করে, যেমন ফর্ম সাবমিট বাতিল করা, লিঙ্কের ডিফল্ট প্রসারণ বাতিল করা ইত্যাদি।

স্টপ প্রসারণ বাতিল করা

ইভেন্ট প্রসারণ বাতিল করা হলো একটি ইভেন্টের স্ট্যান্ডার্ড বাবজোড় ব্রাউজার ক্রিয়াকলাপ বন্ধ করা। ইভেন্ট প্রসারণ বাতিল করার জন্য stopPropagation() মেথড ব্যবহার করা হয়। এটি কোনো একই ইভেন্টের একাধিক লিসেনার প্রসারণ করার ব্যাপারে সহায়ক হয়।

ডেটা স্যাংক্রোনাইজেশন

কিছু সময়ে, ব্যবহারকারী কতৃক গৃহীত ডেটা অপডেট করার সময়, ডেটা স্যাংক্রোনাইজেশন খুবই জরুরি হতে পারে। ইভেন্ট অবজেক্টের change প্রপার্টি ব্যবহার করে আপনি এই ডেটা স্যাংক্রোনাইজেশন করতে পারেন।

ডোম ইভেন্ট বাবজোড়

ডোম ইভেন্ট বাবজোড় হলো একটি গুরুত্বপূর্ণ ধরণের বাবজোড় যা ডোম এলিমেন্ট এর অন্তর্গত এইভেন্ট গুলির অনুমতি প্রদান করে। যেমন, আপনি কিছু গোপন তথ্য সম্পর্কে যদি ক্লিক করে থাকেন, তবে সেই ডিভাইসে কিছু এলিমেন্টের ওপর ক্লিক করলে তার তথ্য আপনার পাসে দেখানো হয় না। এটি গুরুত্বপূর্ণ কারণে এটি সুস্থ সাইটের প্রচার ও উন্নতির জন্য ব্যবহৃত হয়।

Event Delegation

ইভেন্ট ডেলিগেশন হলো ডোম ইভেন্ট বাবজোড় এর একটি গুরুত্বপূর্ণ প্রক্রিয়া যা ডোকুমেন্টের প্যারেন্ট এলিমেন্টে এইভেন্ট লিসেনার সেট করে এলিমেন্টের কোয়েরি সিলেক্টর ইত্যাদি এর ওপর প্রসারিত ইভেন্ট গুলি ক্যাচ করে। এটি একাধিক এলিমেন্টের জন্য ইভেন্ট লিসেনার সেট করার প্রয়োজন কমিয়ে তুলে ধরে এবং বিশেষভাবে পাত্র প্রকারের সাইটে এটি প্রচুর গুণগত হয়।

Frequently Asked Questions (FAQs)

প্রশ্ন: ডোম ইভেন্ট কি?

উত্তর: ডোম ইভেন্ট হলো ব্রাউজারের সাথে কার্যকর ইভেন্ট, যা ব্যবহারকারীর ইন্ট্রাকশনের সাথে সংক্রান্তিত। যেমন, ক্লিক, ডাবল-ক্লিক, মাউস উঠানো, কীবোর্ড ইভেন্ট, ইত্যাদি।

প্রশ্ন: ডোম ইভেন্ট লিসেনার কি?

উত্তর: ডোম ইভেন্ট লিসেনার হলো একটি জাভাস্ক্রিপ্ট ফাংশন, যা ডোম ইভেন্টের সাথে সম্পর্কিত কাজ করতে ব্যবহৃত হয়। যখন ব্যবহারকারী একটি ইভেন্ট ট্রিগার করে, তখন এই লিসেনার ফাংশন কল হয়।

প্রশ্ন: ডোম ইভেন্ট বাবজোড় কি?

উত্তর: ডোম ইভেন্ট বাবজোড় হলো একটি প্রক্রিয়া যা ডোকুমেন্টের প্যারেন্ট এলিমেন্টে এইভেন্ট লিসেনার সেট করে এলিমেন্টের কোয়েরি সিলেক্টর ইত্যাদি এর ওপর প্রসারিত ইভেন্ট গুলি ক্যাচ করে।

প্রশ্ন: ইভেন্ট বাবলিং এবং ক্যাপচারিং এর মধ্যে পার্থক্য কি?

উত্তর: ইভেন্ট বাবলিং হলো ডোম ইভেন্ট এর একটি ব্যবহারকারী ইন্টারফেস যা একটি শিশু এলিমেন্ট থেকে একটি প্যারেন্ট এলিমেন্ট এ একটি ইভেন্ট এর উপর প্রসারণ দেয়। ইভেন্ট ক্যাপচারিং হলো ডোম ইভেন্ট এর একটি অপসারণ প্রক্রিয়া যা একটি প্যারেন্ট এলিমেন্ট থেকে একটি শিশু এলিমেন্ট এ একটি ইভেন্ট এর উপর প্রসারণ দেয়।

প্রশ্ন: ডোম ইভেন্ট ডেলিগেশনের কীভাবে উপকারী?

উত্তর: ডোম ইভেন্ট ডেলিগেশন ব্যবহার করে আপনি অনেক কম ইভেন্ট লিসেনার সেট করতে পারেন এবং এটি সাধারণভাবে ডাইনামিকভাবে ইলিমেন্টের জন্য ইভেন্ট লিসেনার সেট করার প্রয়োজন কমিয়ে তুলে ধরে।

সংক্ষেপণ (Conclusion)

এই জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়ালটির সাথে আপনি জাভাস্ক্রিপ্ট ডোম ইভেন্ট এবং ইভেন্ট অবজেক্ট সম্পর্কিত গভীর জ্ঞান প্রাপ্ত করেছেন। ইভেন্ট হ্যান্ডলিং ব্যবস্থা সাধারণভাবে ও ডাইনামিকভাবে ইলিমেন্টের জন্য ইভেন্ট লিসেনার সেট করার সুবিধা সৃষ্টি করে। ডোম ইভেন্ট কে সাবলেট করার জন্য ইভেন্ট বাবজোড় এবং ইভেন্ট ক্যাপচারিং প্রয়োজনীয় গুরুত্বপূর্ণ কনসেপ্ট গুলি।

সুতরাং, আপনি এখন জাভাস্ক্রিপ্টে ডোম ইভেন্ট এবং ইভেন্ট অবজেক্ট ব্যবহার করতে সক্ষম হয়েছেন এবং আপনি স্বয়ংক্রিয়ভাবে ব্রাউজারে এইভেন্ট বিজ্ঞপ্তি করতে পারেন। এই টিউটোরিয়ালে প্রদত্ত সমস্ত উদাহরণ এবং বিশদ ব্যাখ্যা দেওয়ার মাধ্যমে আপনি ডোম ইভেন্ট এবং ইভেন্ট অবজেক্টের সাথে সম্পর্কিত সুবিধা প্রাপ্ত করতে পারেন।

ধন্যবাদ যে আপনি আমার জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল পড়ে সম্প্রদায়ে যোগদান করেছেন। আপনার মেয়াদী প্রয়োজনে আপনি সমস্যাগুলি সমাধান করতে এই টিউটোরিয়াল ব্যবহার করতে পারেন এবং আপনি আপনার ওয়েব অ্যাপ্লিকেশনে জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলিং সম্পর্কে আরও গভীর জ্ঞান প্রাপ্ত করতে সক্ষম হয়েছেন।

ভালো যে আপনি আমার সাথে এই টিউটোরিয়াল পড়ে সম্প্রদায়ে যোগদান করেছেন! আমি ভবিষ্যতেও আরও প্রয়োজনে আপনার সাহায্য করতে আছি। আপনি যদি কোনো প্রশ্ন অথবা মতামত থাকে, তবে আমি সর্বদা সাহায্য করার জন্য উপলব্ধ আছি।