Javascript Bangla Tutorial-41: Event Listener

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

ইভেন্ট লিস্টেনারের সংযোজন

ইভেন্ট লিস্টেনার সংযোজন করার জন্য addEventListener() মেথড ব্যবহার করা হয়। এটি দুটি প্যারামিটার গ্রহণ করে: ইভেন্টের নাম এবং একটি কলব্যাক ফাংশন। কলব্যাক ফাংশন হ'ল একটি ফাংশন যা ইভেন্ট প্রপাগেশনের সময় কল হবে। এটি সংযোজন করা হয় এই ভাবে:

element.addEventListener(eventType, callbackFunction);

উদাহরণঃ




    ইভেন্ট লিস্টেনারের সংযোজন উদাহরণ

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

ইভেন্ট বাবলিং (Event Bubbling)

ইভেন্ট বাবলিং হ'ল ইভেন্টের প্রপাগেশনের একটি প্রক্রিয়া যা অটোমেটিকভাবে ঘটে। যখন একটি এলিমেন্টে একটি ইভেন্ট সংজ্ঞা করা হয়, তখন এই ইভেন্ট এলিমেন্টে গুরুত্বপূর্ণ কাজ করে এবং তারপর এই ইভেন্টের প্রপাগেশন সাম্প্রতিক প্রয়োজনে উপরে যায়, সাধারণভাবে এই ইভেন্টের প্রপাগেশন বিভিন্ন প্যারেন্ট এলিমেন্টে ঘটে এবং তারপর সর্বোচ্চ প্যারেন্ট এলিমেন্টে পৌঁছে যায়। এটি ব্রাউজারের ডিফল্ট অ্যাক্সিডেন্টের মধ্যে ঘটে।

উদাহরণঃ




    ইভেন্ট বাবলিং উদাহরণ

উপরের উদাহরণে, আমরা প্যারেন্ট এবং চাইল্ড এলিমেন্টে একই ইভেন্ট সংজ্ঞা করেছি। প্যারেন্ট এলিমেন্ট এবং চাইল্ড এলিমেন্ট এর উপর ক্লিক করলে প্যারেন্ট এবং চাইল্ড এলিমেন্ট এর প্রপাগেশন দেখায় এবং সম্প্রতি ক্লিক করা বাটনের উপর প্রপাগেশন দেখায়।

এভেন্ট ক্যাপচারিং (Event Capturing)

এভেন্ট ক্যাপচারিং হ'ল একটি বিশেষ প্রক্রিয়া যা ইভেন্টের প্রপাগেশনের একটি বিকল্প। এটি ইভেন্টের প্রপাগেশনের মধ্যে ঘটে এবং সাধারণভাবে ইভেন্টের প্রপাগেশন অটোমেটিকভাবে নিচে যায়, সাধারণভাবে ইভেন্টের প্রপাগেশন বিভিন্ন চাইল্ড এলিমেন্টে ঘটে এবং তারপর সর্বোচ্চ প্যারেন্ট এলিমেন্টে পৌঁছে যায়। এটি ব্রাউজারের ডিফল্ট অ্যাক্সিডেন্টের একটি অপশন।

উদাহরণঃ




    এভেন্ট ক্যাপচারিং উদাহরণ

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

এভেন্ট অবজার্ভেশন (Event Delegation)

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

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

উদাহরণঃ




    এভেন্ট অবজার্ভেশন উদাহরণ



    
        আইটেম ১
        আইটেম ২
        আইটেম ৩
        আইটেম ৪

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

জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল-৪১: ইভেন্ট লিস্টেনার - প্রাথমিক ধাপ

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




    ইভেন্ট লিস্টেনার - প্রাথমিক ধাপ

উপরের উদাহরণে, আমরা একটি বাটনের উপর একটি ইভেন্ট লিস্টেনার সংযোজন করেছি। ব্যবহারকারী বাটনে ক্লিক করলে একটি অ্যালার্ট দেখানো হবে, যার মধ্যে "আপনি বাটনে ক্লিক করেছেন!" লেখা থাকবে।

ইভেন্ট লিস্টেনার সংযোজন করার জন্য addEventListener() মেথড ব্যবহার করা হয়, এটি দুটি প্যারামিটার গ্রহণ করে: ইভেন্টের নাম এবং একটি কলব্যাক ফাংশন। কলব্যাক ফাংশন হ'ল একটি ফাংশন যা ইভেন্ট প্রপাগেশনের সময় কল হবে। উদাহরণঃ

element.addEventListener(eventType, callbackFunction);

বিভিন্ন ইভেন্ট গুলি

জাভাস্ক্রিপ্টে বিভিন্ন ইভেন্ট গুলি রয়েছে, যা ওয়েব পেজে ব্যবহারকারী একটি ইনপুট দেয় বা ইন্টারঅ্যাকশনের প্রতিক্রিয়া নেয়। কিছু গুরুত্বপূর্ণ ইভেন্ট গুলি নিম্নলিখিত:

click: ব্যবহারকারী একটি এলিমেন্টে ক্লিক করলে সক্রিয় হয়।
mouseover: ব্যবহারকারী একটি এলিমেন্টের উপর মাউস অভিযান করলে সক্রিয় হয়।
mouseout: ব্যবহারকারী একটি এলিমেন্টের উপর থেকে মাউস বের করলে সক্রিয় হয়।
keydown: ব্যবহারকারী কোনও কী প্রেস করলে সক্রিয় হয়।
keyup: ব্যবহারকারী একটি কী বন্ধ করলে সক্রিয় হয়।
submit: ফর্ম সাবমিট করা হলে সক্রিয় হয়।

এই গুরুত্বপূর্ণ ইভেন্ট গুলি সংজ্ঞা করে আপনি ইভেন্ট লিস্টেনার সংযোজন করতে পারেন এবং ব্যবহারকারীর ইনপুট ধরতে এবং প্রতিক্রিয়া অনুসরণ করতে পারেন।

এভেন্ট বাবলিং (Event Bubbling) এবং এভেন্ট ক্যাপচারিং (Event Capturing)

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

এভেন্ট অবজার্ভেশন (Event Delegation)

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

উদাহরণঃ




    এভেন্ট অবজার্ভেশন উদাহরণ



    
        আইটেম ১
        আইটেম ২
        আইটেম ৩
        আইটেম ৪

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

Javascript Bangla Tutorial-41: Event Listener