ইভেন্ট বাবলিং
ইভেন্ট বাবলিং প্রক্রিয়া শুরু হয় ইভেন্ট ট্রিগার করা এলিমেন্ট থেকে এবং তারপর হায়ারার্কিতে কন্টেইনিং এলিমেন্টগুলোর দিকে বাবল আপ করে।
বিস্তারিত ব্যাখ্যা
উদাহরণে ৩টি এলিমেন্ট রয়েছে: div, span এবং button।
- হায়ারার্কি মেইন্টেইন করতে button এলিমেন্টটি span-এর ভেতরে নেস্টেড, এবং span div-এর ভেতরে নেস্টেড।
- সব এলিমেন্টে ক্লিক ইভেন্ট অ্যাসাইন করা হয়েছে যাতে ক্লিক করলে সম্মানিত মেসেজ সহ অ্যালার্ট বক্স খুলে।
- প্রোগ্রাম এক্সিকিউট করার পর নিচের ছবিটি স্ক্রিনে দেখাবে।
- যখন কোনো এলিমেন্টে ক্লিক করা হয়, তখন অটোমেটিক্যালি এর আউটসাইড এলিমেন্টগুলো (কন্টেইনিং এলিমেন্ট) ও বাবল আপ করে এক্সিকিউট হয়।
- উদাহরণস্বরূপ, সবচেয়ে ভেতরের নেস্টেড এলিমেন্ট (button)-এ ক্লিক করলে তার অ্যালার্ট বক্সের পাশাপাশি অন্য এলিমেন্টের অ্যালার্ট বক্স (span, div) একে একে হায়ারার্কি ফলো করে খুলবে।
- যদি span এলিমেন্টে ক্লিক করা হয়, তবে span এবং এর কন্টেইনিং এলিমেন্ট div-এর অ্যালার্ট বক্স একে একে খুলবে।
- ট্রিগার করা এলিমেন্ট থেকে হায়ারার্কিতে কন্টেইনিং এলিমেন্টগুলোর দিকে বাবল আপ করার এই প্রক্রিয়াকেই ইভেন্ট বাবলিং বলা হয়।
- ট্রিগার করা এবং বাবল আপ করা এলিমেন্টগুলো এক্সিকিউট হবে।
উদাহরণ
<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>আউটপুট
বাটনে ক্লিক করলে অ্যালার্ট সিকোয়েন্স: Button clicked → Span clicked → Div clicked
ব্যাখ্যা
ইনলাইন onclick হ্যান্ডলার ব্যবহার করা হয়েছে। addEventListener-র থার্ড প্যারামিটার false (ডিফল্ট) হলে বাবলিং ফেজে হ্যান্ডলার এক্সিকিউট হয়। event.stopPropagation() দিয়ে বাবলিং रोका যায়।
