Dom Event | Event Object | Onsubmit Event: A Comprehensive Guide
ডোম ইভেন্ট, ইভেন্ট অবজেক্ট, এবং অনসাবমিট ইভেন্ট এটি জাভাস্ক্রিপ্টের মহত্ত্বপূর্ণ বিষয়ে একটি বিস্তৃত টিউটোরিয়াল। এই টিউটোরিয়ালে, আমরা ডোম ইভেন্ট কী, কিভাবে ইভেন্ট অবজেক্ট কাজ করে, এবং অনসাবমিট ইভেন্ট কীভাবে কাজ করে তা সম্পর্কে বিস্তারিত জানব। এই টিউটোরিয়াল আপনাকে ডোমের ইভেন্ট সম্পর্কে প্রাথমিক জ্ঞান থেকে সম্পূর্ণ স্বধীনভাবে ধারণা করার সুযোগ দেবে।
১. ডোম ইভেন্ট কি?
ডোম ইভেন্ট হলো ওয়েব পেজের নির্দিষ্ট ইভেন্ট যেমন ক্লিক, ডাবল ক্লিক, কীবোর্ড ইভেন্ট, মাউস মাভমেন্ট, এন্টার ইত্যাদি যা ডোমে ঘটে। ইউজারের কোনো ইন্টার্যাক্টিভ ক্রিয়া প্রয়োজন হলে, ডোম ইভেন্ট এর মাধ্যমে সেই ক্রিয়া বা প্রক্রিয়াটি সক্রিয় করা যায়।
২. ইভেন্ট অবজেক্ট কী?
ইভেন্ট অবজেক্ট হলো ডোম ইভেন্টের সম্পূর্ণ বিবরণ, যা একটি ইভেন্টে ঘটানো ঘটনার তথ্য সংগ্রহ করে। ইভেন্ট অবজেক্টে ইভেন্টের ধরন, স্থান, সময়, টার্গেট এলিমেন্ট ইত্যাদির মতো তথ্য রয়েছে।
৩. অনসাবমিট ইভেন্ট কি?
অনসাবমিট ইভেন্ট হলো একটি ফর্মের সাবমিশন প্রক্রিয়ার পরে ঘটানো ইভেন্ট। এটি অনুমোদিত ইউজারের প্রস্তুতি প্রক্রিয়ায় ব্যবহৃত হয়, যেমন ফর্ম সাবমিট বা এন্টার দেওয়া।
৪. ডোম ইভেন্ট হ্যান্ডলিং
ডোম ইভেন্ট হ্যান্ডলিং হলো কোডের মাধ্যমে ডোম ইভেন্ট সক্রিয় করা। যেমন, একটি বাটনে ক্লিক করার সময় একটি ফাংশন সক্রিয় করে যা নতুন কন্টেন্ট প্রদর্শন করতে পারে।
৫. ইভেন্ট অবজেক্টের বৈশিষ্ট্য
ইভেন্ট অবজেক্টে কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে:
- ইভেন্ট টাইপ: ইভেন্টের ধরণ, যেমন ক্লিক, ডাবল ক্লিক, ইত্যাদি।
- ইভেন্ট টার্গেট: ইভেন্ট ঘটানো এলিমেন্টের রেফারেন্স।
- ইভেন্ট পিকোয়াল পজিশন: ইভেন্ট ঘটানোর সময় ইভেন্ট প্রয়োগ এলিমেন্টের পিকোয়াল পজিশন।
- ইভেন্ট কী: কীবোর্ড ইভেন্টের ক্রিয়া, যেমন কি কি কী চাপা হয়েছে।
৬. ডোম ইভেন্ট লিসেনার যোগ করা
ডোম ইভেন্ট লিসেনার হলো একটি ফাংশন যা কোনও ডোম ইভেন্টের সাথে সংযোগ স্থাপন করে। ইভেন্ট লিসেনার যোগ করতে আমরা addEventListener() মেথড ব্যবহার করি।
৭. অনসাবমিট ইভেন্ট এবং ফর্ম সাবমিট করা
ফর্মের ক্লিক বা এন্টারের প্রক্রিয়ার পরে একটি ফর্ম সাবমিট ইভেন্ট ঘটায়। এই ইভেন্ট এর সাথে যুক্ত ফর্ম ডেটা সার্ভারে প্রেরণ করা হয় যাতে ফর্ম সাবমিট করার পরে প্রস্তুতি প্রক্রিয়া সম্পন্ন করা যায়।
৮. ইভেন্ট বাবস্থাপনা বাতিল করা
কিছু সময়ে, ইউজার কোন ইভেন্ট বাবস্থাপনা বাতিল করতে পারে যেনো কোন অপ্রয়োজনীয় ক্রিয়া হয়না। এটি ব্যক্তিগত পছন্দ অনুমোদনের মাধ্যমে সম্পন্ন করা যায়।
৯. বোবস্থাপনা বাতিল ইভেন্ট
ডোমে কিছু স্পেশাল ইভেন্ট রয়েছে যা একবার ঘটানোর পর স্বয়ংক্রিয়ভাবে বাতিল হয়ে যায়। এগুলি বোবস্থাপনা বাতিল ইভেন্ট হিসেবে পরিচিত।
১০. ডোম ইভেন্ট ক্যাপচারিং
ডোম ইভেন্ট ক্যাপচারিং একটি মহত্ত্বপূর্ণ ইভেন্ট হ্যান্ডলিং টেকনিক। এটি বুবলিং বা ক্যাপচারিং এর মতো হলেও এটি ক্যাপচারিং এর উল্লেখযোগ্য পরিবর্তনগুলি আদান-প্রদান করে না।
১১. ইভেন্ট বাবস্থাপনা প্রস্তুতি
ডোম ইভেন্ট বাবস্থাপনা প্রস্তুতি হলো একটি মেথড যা কোনও ইভেন্ট বাবস্থাপনা সম্পর্কিত ইভেন্ট সেটআপ করতে ব্যবহার করা যায়। এই প্রস্তুতি আপনার কোডে একের পর এক ইভেন্ট সেটআপ বাছাই করতে সাহায্য করে যাতে অপ্রয়োজনীয় ইভেন্ট প্রস্তুতি সম্পন্ন হয় না।
১২. ইভেন্ট অবজেক্টের প্রস্তুতি
ডোম ইভেন্ট অবজেক্টের প্রস্তুতি হলো একটি মেথড যা কোনও ইভেন্ট অবজেক্ট সম্পর্কিত ইভেন্ট সেটআপ করতে ব্যবহার করা যায়। এই প্রস্তুতি আপনার কোডে একের পর এক ইভেন্ট সেটআপ বাছাই করতে সাহায্য করে যাতে অপ্রয়োজনীয় ইভেন্ট প্রস্তুতি সম্পন্ন হয় না।
১৩. ইভেন্ট অবজেক্টের বিভিন্ন মেথড
ইভেন্ট অবজেক্টের কিছু গুরুত্বপূর্ণ মেথড রয়েছে:
- stopPropagation(): ইভেন্ট ক্যাপচারিং বন্ধ করে এবং ক্যাপচারিং এর সাথে যুক্ত পরিবর্তনগুলি প্রসারিত করে না।
- preventDefault(): ইভেন্টের ডিফল্ট প্রস্তুতি বাতিল করে।
- stopImmediatePropagation(): ইভেন্ট ক্যাপচারিং এবং বাবস্থাপনা বাতিল করে।
১৪. ক্লাসতে ইভেন্ট হ্যান্ডল করা
আপনি একটি ক্লাসের ভেতরে ইভেন্ট হ্যান্ডল করতে পারেন যাতে প্রতিটি ইনস্ট্যান্সে ইভেন্ট হ্যান্ডলার সক্রিয় হয়। এর জন্য আপনি this কিওয়ার্ড ব্যবহার করতে পারেন।
১৫. প্রোপাগেশন বাবস্থাপনা ইভেন্ট
প্রোপাগেশন বাবস্থাপনা ইভেন্ট হলো একটি ইভেন্ট যা একটি এলিমেন্ট থেকে আরেকটি এলিমেন্টে প্রোপাগেট হয়। এই প্রোপাগেশন সাধারণভাবে নিষ্ক্রিয় করার জন্য stopPropagation() মেথড ব্যবহার করা হয়।
১৬. ইভেন্ট ডিলিগেশন
ইভেন্ট ডিলিগেশন একটি ব্যবহারকারীর কাছে ইভেন্ট হ্যান্ডলার সেট আপ করার প্রক্রিয়া। এই প্রক্রিয়াতে একটি প্যারেন্ট এলিমেন্ট বা একটি উপাদানে ইভেন্ট হ্যান্ডলার সেট আপ করা হয়, যাতে এই ইভেন্ট হ্যান্ডলার সক্রিয় হয় তার সকল চাইল্ড এলিমেন্টে।
১৭. কোডের ভেতরে ইভেন্ট বাবস্থাপনা
কখনও কখনও আমরা কোডের ভেতরেই ইভেন্ট বাবস্থাপনা সম্পন্ন করতে পারি। এটি প্রস্তুত ইভেন্ট সেটআপ এর মধ্যে করা হয়, যাতে কোনও অপ্রয়োজনীয় ইভেন্ট প্রস্তুতি সম্পন্ন না হয়।
১৮. ডোম ইভেন্ট অবজেক্টের ডিফল্ট প্রস্তুতি
ডোম ইভেন্ট অবজেক্টের ডিফল্ট প্রস্তুতি হলো যে ইভেন্টের সাথে সংযোগ করা ফাংশন যদি কোন প্রস্তুতি না করে, তবে সেই ইভেন্টের ডিফল্ট প্রস্তুতি সম্পন্ন হয়।
১৯. ক্রস ব্রাউজিং ইভেন্ট
ক্রস ব্রাউজিং ইভেন্ট হলো যে ইভেন্ট যা একটি এলিমেন্টে ঘটে, কিন্তু এটি এই এলিমেন্টের প্রস্তুতির সাথে আপনার ব্রাউজারের বাহ্যিক বান্ধব ইভেন্টের প্রস্তুতির সাথে ক্যানসেল করা যায়।
২০. ডোম ইভেন্ট অবজেক্ট সমর্থন
ডোম ইভেন্ট অবজেক্ট প্রায় সমস্ত মডার্ন ব্রাউজার দ্বারা সমর্থিত হয়। তাই আপনি বিভিন্ন ব্রাউজারে একই মডেল ইভেন্ট কোড ব্যবহার করতে পারেন এবং এটি সবগুলি প্ল্যাটফর্মে ঠিকঠাকভাবে কাজ করবে।
২১. এক্সটার্নাল লিংক সাথে ইভেন্ট হ্যান্ডলিং
কিছু সময়ে, আপনি একটি এলিমেন্টের সাথে সাংযোজ্য নয় কিন্তু এই এলিমেন্টের সাথে সংযুক্ত একটি এক্সটার্নাল লিংকের সাথে ইভেন্ট হ্যান্ডলিং করতে চান। এটি সম্পন্ন করতে আপনি ইভেন্ট ডিলিগেশন টেকনিক ব্যবহার করতে পারেন।
২২. ডোম ইভেন্টের ব্যবহার
ডোম ইভেন্টের ব্যবহার করার সময়, আপনাকে নিশ্চিত করতে হবে যে সব ব্রাউজারে এই ইভেন্ট সমর্থিত হয়। সাধারণভাবে, ডোম ইভেন্টের নাম একই হয় কিন্তু কিছু ব্রাউজার এই নাম এর মধ্যে ক্যাপিটালিজ অক্ষর ব্যবহার করতে পারে। তাই সেই ব্রাউজারে এই নাম ব্যবহার করার প্রেফারেন্স দেওয়া ভালো।
২৩. সিনট্যাক্স কেস
ডোম ইভেন্ট সিনট্যাক্স কেস সম্পর্কে আপনি সতর্ক থাকতে পারেন যাতে কোড ভালোভাবে কাজ করে। সাধারণভাবে, ক্যামেল কেস প্রস্তুতি ব্যবহার করা হয় তাতে প্রথম শব্দের মধ্যে ক্যাপিটাল অক্ষর থাকে, যাতে এটি ভালোভাবে বোঝা যায় যে এটি একটি ইভেন্ট হ্যান্ডল করছে।
২৪. ইভেন্ট হ্যান্ডলিং প্রাকটিস
এই সময়ে আপনি প্রাকটিস করতে পারেন ডোম ইভেন্ট হ্যান্ডলিং। এটি আপনার ব্রাউজারে একটি সাধারণ ওয়েবপেজ ব্যবহার করে সম্পন্ন করা যায়। আপনি একটি বাটন যোগ করতে পারেন এবং একটি ইভেন্ট হ্যান্ডলার সেটআপ করতে পারেন যাতে বাটনে ক্লিক করা হলে একটি ম্যাসেজ দেখায়। এটি আপনার প্রস্তুতি এবং কাজটি ভালোভাবে বোঝার সাহায্য করবে।
Frequently Asked Questions (FAQs)
উত্তর: ডোম ইভেন্ট হলো একটি ব্রাউজারের বা ডকুমেন্ট অবজেক্ট মডেলের ইভেন্ট, যা একটি ইভেন্ট হ্যাপেন করলে ব্যক্তিগত কোড বা হ্যান্ডলার সক্রিয় হয়।
উত্তর: ইভেন্ট হ্যান্ডলার সেটআপ করতে আপনি addEventListener() মেথড ব্যবহার করতে পারেন।
উত্তর: ডোম ইভেন্ট বাবস্থাপনা হলো একটি টেকনিক যার মাধ্যমে ইভেন্ট হ্যান্ডলার একটি এলিমেন্টে সেট আপ করা হয় তাতে প্রস্তুতি সম্পন্ন করতে সেই এলিমেন্টের সকল চাইল্ড এলিমেন্টে এই ইভেন্ট সক্রিয় হয়।
উত্তর: ইভেন্ট ডিলিগেশন হলো একটি ব্যবহারকারীর কাছে ইভেন্ট হ্যান্ডলার সেট আপ করার প্রক্রিয়া যাতে এই ইভেন্ট হ্যান্ডলার সক্রিয় হয় তার সকল চাইল্ড এলিমেন্টে।
উত্তর: ক্রস ব্রাউজিং ইভেন্ট হলো একটি ইভেন্ট যা একটি এলিমেন্টে ঘটে, কিন্তু এটি এই এলিমেন্টের প্রস্তুতির সাথে ব্রাউজারের বাহ্যিক বান্ধব ইভেন্টের প্রস্তুতির সাথে ক্যানসেল করা যায়।
উত্তর: ইভেন্ট ডিলিগেশন ব্যবহার করতে আপনি প্যারেন্ট এলিমেন্টে ইভেন্ট হ্যান্ডলার সেট আপ করতে পারেন যাতে এই ইভেন্ট হ্যান্ডলার সক্রিয় হয় তার সকল চাইল্ড এলিমেন্টে।
সমাপ্তি:
এই লম্বা এবং বিস্তৃত আর্টিকেলে আমরা ডোম ইভেন্ট, ইভেন্ট অবজেক্ট এবং অনসাবমিট ইভেন্ট সম্পর্কিত বিস্তারিত জ্ঞান অর্জন করেছি। আমি আশা করি এই আর্টিকেল আপনার জন্য উপকারী এবং স্পষ্ট ছিল। ডোম ইভেন্ট এবং ইভেন্ট অবজেক্ট সম্পর্কে আরও অধ্যয়ন করতে আপনি আপনার স্কিল এবং জ্ঞান উন্নত করতে পারেন এবং ওয়েব ডেভেলপমেন্ট প্রস্তুতি এবং কাজে সহায়ক হতে পারেন।
