জাভাস্ক্রিপ্টে ইভেন্ট বুদবুদ কি?

ইভেন্ট বুদবুদ

ইভেন্ট বুদবুদ করার প্রক্রিয়াটি সেই উপাদান দিয়ে শুরু হয় যা ইভেন্টটিকে ট্রিগার করেছিল এবং তারপর ক্রমানুসারে থাকা উপাদানগুলি পর্যন্ত বুদবুদ করে।

ডিব্রিফ

নিম্নলিখিত উদাহরণে আমাদের 3টি উপাদান আছে div , স্প্যান এবং বোতাম .

শ্রেণীবিন্যাস বজায় রাখতে আমাদের সেই বোতাম প্রয়োজন উপাদানটি স্প্যান -এর ভিতরে নেস্ট করতে হবে উপাদান, এবং span উপাদানটি div -এর ভিতরে নেস্ট করতে হবে উপাদান
সমস্ত উপাদানগুলিতে ক্লিক ইভেন্টগুলি বরাদ্দ করুন যাতে কোনও উপাদান ক্লিক করা হলে, উদাহরণে দেখানো হিসাবে একটি সম্মানিত বার্তা প্রদর্শন করে একটি সতর্কতা বাক্স খুলতে পারে৷
প্রোগ্রামটি কার্যকর করার পরে, নীচের দেখানো চিত্রটি স্ক্রিনে কার্যকর হবে।
যখন একটি উপাদান ক্লিক করা হয় তখন স্বয়ংক্রিয়ভাবে এর বাইরের উপাদানগুলি (উপাদানগুলি ধারণ করে)ও বুদবুদ হয়ে যায় এবং কার্যকর হয়৷
উদাহরণস্বরূপ, আমরা যদি সবচেয়ে ভিতরের সবচেয়ে নেস্টেড এলিমেন্টে(বোতাম) ক্লিক করি তাহলে এর সতর্কতা বক্সের সাথে অন্যান্য এলিমেন্টের সতর্কতা বক্স (স্প্যান, ডিভি)ও ক্রমধারা অনুসরণ করে একে একে খুলবে।
ধরুন, যদি আমরা স্প্যান -এ ক্লিক করি উপাদান তারপর span এর সতর্কতা বক্স এবং এর উপাদান div রয়েছে হবে একে একে খুলুন।
8) এলিমেন্ট ট্রিগার করার এবং তারপর হায়ারার্কিতে থাকা উপাদানগুলি পর্যন্ত বুদবুদ করার এই প্রক্রিয়াটিকে ইভেন্ট বাবলিং বলে। .
9) ট্রিগার করা এবং বুদবুদ করা উপাদানগুলি কার্যকর করা হবে৷

উদাহরণ

<html>
<head>
<style>
   .styleClass{
      display:table-cell;
      border:1px solid black;
      padding: 20px;
      text-align:center;
   }
</style>
</head>
<body>
   <div class = "styleClass" onclick = "alert('Div clicked')">Div element
   <span class = "styleClass" onclick ="alert('Span clicked')">span element
   <input type = "button" value = "click me" onclick="alert('Button clicked')">
</span>
</div>
</body>
</html>

কোড এডিটরে প্রোগ্রামটি এক্সিকিউট করার পর নিচের ছবি দেখাবে

জাভাস্ক্রিপ্টে ইভেন্ট বুদবুদ কি? 'ক্লিক মি' বোতামে (বোতাম উপাদান) ক্লিক করলে নিম্নলিখিত আউটপুটটি প্রদর্শিত হবে।