Event Delegation এবং Bubbling

Event Delegation এবং Event Bubbling হল জাভাস্ক্রিপ্টের ইভেন্ট মডেল সম্পর্কিত দুটি গুরুত্বপূর্ণ ধারণা, যা Polymer Framework (এবং ওয়েব ডেভেলপমেন্টে সাধারণভাবে) ব্যবহার করার সময় অনেক কাজে আসে। এই ধারণাগুলি ওয়েব অ্যাপ্লিকেশনগুলিতে ইভেন্ট হ্যান্ডলিংকে সহজ এবং দক্ষ করে তোলে। Polymer-এ এই ধারণাগুলির ব্যবহার খুবই গুরুত্বপূর্ণ, কারণ Polymer-এর কাস্টম উপাদান তৈরি করতে হয় এবং ইভেন্ট হ্যান্ডলিং এর মাধ্যমে উপাদানগুলির আচরণ নির্ধারণ করা হয়।

Event Bubbling:

Event Bubbling হল একটি ইভেন্ট মেকানিজম, যেখানে ইভেন্টটি একটি উপাদান থেকে শুরু হয়ে তার প্যারেন্ট উপাদানে উঠতে থাকে। অর্থাৎ, যদি আপনি একটি ইভেন্ট একটি উপাদানে (যেমন বাটনে) ট্রিগার করেন, তবে তা ঐ উপাদানের প্যারেন্ট (যেমন ডিভ) এর দিকে "বুবল" হয়ে যেতে পারে।

উদাহরণ:

ধরা যাক, আপনি একটি বাটনে ক্লিক করেছেন এবং সেই বাটনটি একটি ডিভের ভিতরে রয়েছে। এই পরিস্থিতিতে, বাটনে ক্লিক করার পর ইভেন্টটি প্রথমে বাটনেই হ্যান্ডল হবে, কিন্তু তারপর ডিভে পৌঁছাবে এবং সেখানে হ্যান্ডল হতে পারে।

<div id="parent" onclick="handleParentClick(event)">
  <button id="child">Click me</button>
</div>

<script>
  function handleParentClick(event) {
    console.log('Parent div clicked!');
  }

  document.getElementById('child').addEventListener('click', function(event) {
    console.log('Button clicked!');
    event.stopPropagation();  // If you want to stop bubbling
  });
</script>

• Output:
  1. যখন আপনি বাটনে ক্লিক করবেন, প্রথমে "Button clicked!" দেখাবে।
  2. তারপর, যেহেতু ইভেন্ট বুবলিং করে, "Parent div clicked!" ডিভের জন্যও দেখাবে (যদি stopPropagation() না ব্যবহার করা হয়)।

stopPropagation():

• ইভেন্ট বুবলিং বন্ধ করতে event.stopPropagation() ব্যবহার করা যায়। যখন আপনি এটি কল করেন, ইভেন্ট প্যারেন্ট উপাদানে পৌঁছাবে না।

Event Delegation:

Event Delegation হল ইভেন্ট হ্যান্ডলিংয়ের একটি কৌশল, যেখানে প্যারেন্ট উপাদানকে ইভেন্ট হ্যান্ডলার হিসাবে ব্যবহার করা হয়, এবং সেক্ষেত্রে প্যারেন্ট উপাদানেই ইভেন্টটি হ্যান্ডল করা হয়, যেটি চাইল্ড উপাদানে হস্তান্তরিত হয়। এর মাধ্যমে আপনি একই ইভেন্ট হ্যান্ডলার দিয়ে একাধিক চাইল্ড উপাদানকে কভার করতে পারেন।

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

Polymer-এ Event Delegation:

Polymer Framework-এ ইভেন্ট ডেলিগেশন সাধারণত on-<event> অ্যাট্রিবিউটের মাধ্যমে হয়। আপনি প্যারেন্ট উপাদানে ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে পারেন এবং ইভেন্ট বুবলিং-এর মাধ্যমে চাইল্ড উপাদানগুলোর ইভেন্টকে হ্যান্ডল করতে পারেন।

উদাহরণ:

ধরা যাক, একটি ডিভের মধ্যে কয়েকটি বাটন রয়েছে এবং আমরা চাই যে, যখন কোনো বাটনে ক্লিক হবে, তখন সেটা প্যারেন্ট ডিভে হ্যান্ডল হোক।

<dom-module id="event-delegation-example">
  <template>
    <div id="parent">
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
    </div>
  </template>

  <script>
    Polymer({
      is: 'event-delegation-example',
      
      ready: function() {
        // Parent element listening to child button clicks
        this.$.parent.addEventListener('click', function(event) {
          if (event.target.tagName === 'BUTTON') {
            console.log('Button clicked:', event.target.textContent);
          }
        });
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

• এখানে, #parent ডিভটি প্যারেন্ট উপাদান হিসেবে কাজ করছে এবং তার ভিতরের সব বাটনগুলোর ক্লিক ইভেন্ট এই প্যারেন্ট ডিভেই হ্যান্ডল হচ্ছে।
• ইভেন্ট হ্যান্ডলার প্রথমে চেক করে যে ক্লিক করা উপাদানটি একটি বাটন কি না (এখানে event.target.tagName ব্যবহার করা হয়েছে)।
• এর ফলে, একই হ্যান্ডলারে একাধিক বাটনের জন্য ইভেন্ট হ্যান্ডলিং করা সম্ভব হচ্ছে।

Event Bubbling এবং Delegation-এর মধ্যে সম্পর্ক:

• Bubbling: ইভেন্টটি একটি উপাদান থেকে তার প্যারেন্টে উঠে যেতে পারে, এবং প্যারেন্টে হ্যান্ডলিং করা হয়।
• Delegation: প্যারেন্ট উপাদানটি সব চাইল্ড উপাদানের ইভেন্ট হ্যান্ডলিংয়ের দায়িত্ব নেয়, এবং বুবলিং ব্যবহারের মাধ্যমে চাইল্ড উপাদানগুলির ইভেন্ট হ্যান্ডল করে।

Polymer-এ Event Delegation ও Bubbling-এর ব্যবহার:

Polymer Framework-এ আপনি সাধারণত on-<event> অ্যাট্রিবিউট ব্যবহার করে ইভেন্ট হ্যান্ডলিং করবেন। Polymer কাস্টম এলিমেন্টগুলির মধ্যে ইভেন্টগুলি বুবল করে এবং আপনি on-<event> ব্যবহার করে সেই ইভেন্টগুলি প্যারেন্টে ক্যাচ করতে পারেন।

<dom-module id="my-element">
  <template>
    <button on-click="handleClick">Click Me</button>
  </template>

  <script>
    Polymer({
      is: 'my-element',

      handleClick: function(event) {
        console.log('Button clicked!', event);
      }
    });
  </script>
</dom-module>

এখানে, যখন বাটনে ক্লিক হবে, ইভেন্ট বুবল করে প্যারেন্টে যাবে এবং Polymer-এ এই ইভেন্ট হ্যান্ডলার কাস্টম উপাদানে সেট করা যাবে।

• Event Bubbling এবং Event Delegation হল ইভেন্ট হ্যান্ডলিং-এর শক্তিশালী কৌশল যা ওয়েব অ্যাপ্লিকেশনের পারফরমেন্স এবং স্কেলেবিলিটি বাড়াতে সাহায্য করে।
• Event Bubbling ইভেন্টগুলিকে প্যারেন্ট থেকে চাইল্ডের দিকে ঊর্ধ্বমুখী করে, এবং Event Delegation প্যারেন্ট উপাদানে একটি সাধারণ ইভেন্ট হ্যান্ডলার ব্যবহার করে চাইল্ড উপাদানগুলির জন্য ইভেন্ট হ্যান্ডলিং করে। Polymer Framework-এ এই দুটি ধারণা একত্রে ব্যবহৃত হয় যা কোডের পুনঃব্যবহারযোগ্যতা এবং সুশৃঙ্খলতা নিশ্চিত করে।