ইভেন্ট বুবলিং এবং ইভেন্ট ক্যাপচারিং ইভেন্ট প্রবাহের সময় জাভাস্ক্রিপ্টে সর্বাধিক ব্যবহৃত শব্দ। এইচটিএমএল ডিওএম এপিআই-তে ইভেন্ট প্রচারের দুটি উপায়। জাভাস্ক্রিপ্টে ইভেন্ট বুদবুদ এবং ইভেন্ট ক্যাপচার সম্পর্কিত এই নিবন্ধটি কেন আমাদের এগুলি প্রয়োজন তা বিশদে বর্ণনা করবে নিম্নলিখিত ক্রম:
জাভাস্ক্রিপ্টে ইভেন্ট বুদবুদ কী?
ইভেন্ট বুবলিং এমন একটি শব্দ যা লোকেদের ওয়েব অ্যাপ্লিকেশন বা ওয়েবপৃষ্ঠা ব্যবহার করে বিকাশের সময় অবশ্যই আসে come । মূলত ইভেন্ট ইভেন্ট বুবলিং এমন একটি কৌশল যা ইভেন্ট হ্যান্ডলারদের ডাকা হয় যখন কোনও আইটেম অন্য আইটেমে থাকে এবং অবশ্যই একই ইভেন্টের হয়। এটি এনক্যাপসুলেশনের অনুরূপ।
পিএইচপি স্ট্রিং থেকে অ্যারে তৈরি করুন
ইভেন্ট বুবলিং জাভাস্ক্রিপ্টে ইভেন্ট হ্যান্ডলিংয়ের একটি ছোট্ট অংশ। এটি আরও ভালভাবে বুঝতে আমাদের ইভেন্টের প্রচার এবং এটি কীভাবে ইভেন্ট বুদবুদকে সমর্থন করে তা সম্পর্কে আমাদের জানতে হবে।
ইভেন্ট প্রচার কি?
ইভেন্ট প্রচারটি ইভেন্ট বুদবুদ এবং তার সন্তানের মতো ক্যাপচারের সাথে প্যারেন্ট টার্ম হিসাবে তুলনা করা যেতে পারে।এটি নিম্নলিখিত হিসাবে প্রতিনিধিত্ব করা হয়:
আপনি যদি কোনও ছবিতে ক্লিক করেন তবে এটি কেবল একটি ক্লিক ইভেন্ট তৈরি করে না তবে এটি পিতা বা মাতা 'এ' এবং দাদা 'লি' তে যায়। এইভাবে ফাংশন প্রচার হয়। এখানে চিত্রটি শিশু হিসাবে বিবেচনা করা হয় এবং এটি ইভেন্ট টার্গেট যেখানে ক্লিকটি উত্পন্ন হয়। চিত্রটি এর পূর্বপুরুষদের সাথে একত্রে গাছের পরিভাষায় শাখা গঠন করে। ঘটনাটি যে প্রচার করে সেই পথটি আমরা জানতে পেরে শাখাটি গুরুত্বপূর্ণ।
শ্রোতার প্রত্যেককে যথাক্রমে ইভেন্ট ইভেন্টের সাথে ডাকা হয় যা ঘটনার তথ্য সংগ্রহ করে। প্রদত্ত ইভেন্টটির জন্য সমস্ত শ্রোতাদের আহ্বান করার প্রক্রিয়াটি আমরা জানতে পেরে এই প্রচারটি অত্যন্ত গুরুত্বপূর্ণ। উপরের ছবি থেকে আমরা লক্ষ্য করতে পারি যে শাখার সংকল্প স্থির। ইভেন্ট চলাকালীন যে কোনও ট্রি সংশোধন উপেক্ষা করা হয়। এখানে প্রচারটি দ্বি নির্দেশমূলক যা এটি উইন্ডো থেকে ইভেন্টের লক্ষ্যে গিয়ে ফিরে আসে and এখানে প্রচারটি মূলত তিনটি প্রধান ধরণের মধ্যে শ্রেণীবদ্ধ করা হয়েছে। ঐগুলি:
- ক্যাপচার পর্ব: উইন্ডো থেকে ইভেন্টের লক্ষ্য পর্যায়ে যাচ্ছি।
- লক্ষ্য পর্যায়: এটি লক্ষ্য পর্যায়ের।
- বুদ্বুদ পর্যায়: ইভেন্ট টার্গেট প্যারেন্ট থেকে উইন্ডোতে ফিরে।
ইভেন্ট ক্যাপচারিং কি?
এই পর্যায়ে ক্যাপচার শ্রোতাদের বলা হয় যার মানটি 'সত্য' হিসাবে নিবন্ধিত হয়েছে। এটি লিখিত:
el.addEventListener ('ক্লিক করুন', শ্রোতা, সত্য)এখানে শ্রোতার মানটিকে 'সত্য' হিসাবে নিবন্ধভুক্ত করা হয়েছে যাতে এই ইভেন্টটি ক্যাপচার করা হচ্ছে। যদি কোনও মান না থাকে তবে ডিফল্টরূপে মানটি মিথ্যা ছিল এবং ইভেন্টটি ক্যাপচারিত হবে না। সুতরাং এই পর্যায়ে যে ইভেন্টটির মান সত্য তা কেবল উইন্ডো থেকে তাদের পথ সন্ধান করে এবং ডেকে ক্যাপচার হয়ে যায়।
তারপরে ইভেন্টের লক্ষ্য পর্যায়ে নিবন্ধিত সমস্ত শ্রোতাদের তাদের পতাকা স্থিতি সত্য বা মিথ্যা নির্বিশেষে বলা হয়।
জাভাস্ক্রিপ্টে ইভেন্ট বুদবুদ এবং ইভেন্ট ক্যাপচারিংয়ের ব্যবহার
বুদবুদ ধাপে কেবল নন-ক্যাপচারকারীকে বলা হয়, এটি সেই ইভেন্টগুলির পতাকা হিসাবে 'ভুয়া' হিসাবে মূল্য রয়েছে। ইভেন্ট বুদবুদ এবং ইভেন্ট ক্যাপচারিং ডিওএম (ডকুমেন্ট অবজেক্ট মডেল) পরিভাষায় খুব দরকারী এবং গুরুত্বপূর্ণ।
el.addEventListener ('ক্লিক করুন', শ্রোতা, মিথ্যা) // শ্রোতা el.addEventListener ('ক্লিক', শ্রোতা) ক্যাপচার করে না // শ্রোতা ক্যাপচার করে নাকোডের উপরের অংশটি বুদবুদ এবং ক্যাপচারিং পর্বের কাজ দেখায়। সমস্ত ইভেন্ট ইভেন্ট টার্গেটে যায় না। তাদের মধ্যে কিছু বুদবুদ হয় না। তাদের ভ্রমণ লক্ষ্য পর্বের পরে থামবে। তিনটি ইভেন্টের পর্যায় প্রবাহটি নিম্নলিখিত চিত্রটিতে চিত্রিত করা হয়েছে:
ইভেন্ট বুদবুদ সমস্ত ধরণের ইভেন্টগুলিতে কাজ করে না, তবে শ্রোতার অবশ্যই তার অধিকারী '.বুদ্বুদ 'ইভেন্ট অবজেক্টের বুলিয়ান সম্পত্তি। অন্যান্য কয়েকটি বৈশিষ্ট্যের মধ্যে রয়েছে:
- e.target: যা ইভেন্ট লক্ষ্য উল্লেখ করে।
- ই-কর্নার টার্গেট: এটি সেই মোড যা বর্তমান শ্রোতাগুলিতে নিবন্ধিত হয়। এখানে মানটি ব্যবহার করে রেফারেন্স করা হয় এই কীওয়ার্ড
- e.eventPhase: এটি একটি পূর্ণসংখ্যা যা অন্য তিনটি কীওয়ার্ডকে বোঝায় ক্যাপচারিং_ফেজ, বুদবুদ_ফেজ, এ-টার্গেট পর্যায়.
কাজের পদ্ধতি
আসুন আমরা উপরের চিত্রটির আরও কাছাকাছি নজর রাখি। আসুন 'বাটন এক' উপাদানটিতে ক্লিক করুন এবং তারপরে তত্ক্ষণাত একটি ইভেন্ট ট্রিগার করা হবে। সাধারণত কোনও ইভেন্ট গাছের শীর্ষতম উপাদান মূল থেকে যাত্রা শুরু করে। তারপরে এটি গাছটিকে অনুসরণ করে লক্ষ্য ইভেন্টটি যা 'বোতাম এক'। এটি এখানে কীভাবে ভ্রমণ করে:
চিত্রটিতে যেমন দেখানো হয়েছে ইভেন্টটি ডিওএম টার্মিনোলজির মাধ্যমে শেষের দিকে লক্ষ্য ইভেন্টে পৌঁছায়। এখন ইভেন্টটি তার লক্ষ্যে পৌঁছে গেলে এটি শেষ হয় না। এটি নীচের ছবিতে বর্ণিত হিসাবে ডোম পরিভাষায় চলে এবং চলতে থাকে।
ঠিক আগের মতোই, ইভেন্টটির পথে যে উপাদানগুলি এগিয়ে চলেছে ততই প্রতিটি উপাদান তার অস্তিত্ব সম্পর্কে অবহিত হয়। এটি যেমন চলতে থাকে আপনি অবশ্যই ভাবছেন যে আমরা প্রক্রিয়াটি বন্ধ করতে পারি কিনা। ঠিক আছে, প্রশ্নের উত্তর হ্যাঁ আমরা অনুষ্ঠানের প্রচার বন্ধ করতে পারি। এটি অনুরোধ করে সম্পন্ন করা হয় 'স্টপপ্রোপেশন' ইভেন্ট অবজেক্টের পদ্ধতি।
window.addEventListener ('ক্লিক করুন', e => {e.stopPropagation () true, সত্য) উইন্ডো.এডডিএভেন্টলিস্টনার ('ক্লিক করুন', শ্রোতা ('সি 1'), সত্য) '), সত্য) উইন্ডো.এডএভেন্টলিস্টনার (' ক্লিক করুন ', শ্রোতা (' বি 1 ')) উইন্ডো.এডএডএভেন্টলিস্টনার (' ক্লিক করুন ', শ্রোতা (' বি 2 '))কীওয়ার্ড প্রয়োগ করে আমরা প্রচারটি বন্ধ করতে সক্ষম হয়েছি। যখন আমরা কীওয়ার্ডটি প্রয়োগ করি তখন এটি এটির মতো কাজ করে “ স্টপপ্রোপেশন ' তারপরে মূল ইভেন্টের অধীনে থাকা সমস্ত ইভেন্টকে ডাকা হচ্ছে না এবং তাই উপরের কোডের টুকরোটিতে যেমন উল্লেখ করা হয়েছে তেমন তাদের বলা হবে না। আর একটি কীওয়ার্ড রয়েছে যা ' স্টপআইমিডিয়েটপ্রোপেশন '। নাম অনুসারে এটি তাত্ক্ষণিকভাবে ভাইবোনদের কার্যক্রম বন্ধ করে দেয়।
এটির সাথে আমরা আমাদের নিবন্ধের শেষে এসেছি। আমি আশা করি আপনি জাভাস্ক্রিপ্টে ইভেন্ট বুদবুদ এবং ইভেন্ট ক্যাপচারিং কী তা বুঝতে পেরেছেন।
এখন আপনি জাভাস্ক্রিপ্টে ইভেন্ট বুদবুদ এবং ইভেন্ট ক্যাপচারিং সম্পর্কে জানেন, এটি দেখুন লিখেছেন এডুরেকা। ওয়েব ডেভলপমেন্ট শংসাপত্র প্রশিক্ষণ আপনাকে এইচটিএমএল 5, সিএসএস 3, টুইটার বুটস্ট্র্যাপ 3, জ্যাকুয়ারি এবং গুগল এপিআই ব্যবহার করে কীভাবে চিত্তাকর্ষক ওয়েবসাইট তৈরি করতে শিখতে এবং এ্যামাজন সিম্পল স্টোরেজ সার্ভিসে (এস 3) স্থাপন করতে সহায়তা করবে।
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে 'জাভাস্ক্রিপ্টে ইভেন্ট বুদবুদ এবং ইভেন্ট ক্যাপচারিং' এর মন্তব্য বিভাগে এটি উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।