Event Delegation এবং Bubbling

Event Delegation এবং Bubbling: একটি পরিচিতি

Event Delegation এবং Event Bubbling হল DOM ইভেন্ট হ্যান্ডলিংয়ের দুটি গুরুত্বপূর্ণ ধারণা যা JavaScript বা ফ্রন্ট-এন্ড লাইব্রেরি/ফ্রেমওয়ার্কে ব্যবহৃত হয়। Sencha Touch হল একটি মোবাইল ফার্স্ট ফ্রেমওয়ার্ক যা HTML5, CSS3, এবং JavaScript ব্যবহার করে মোবাইল অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। এখানে, আমরা Sencha Touch এ Event Delegation এবং Event Bubbling কীভাবে কাজ করে এবং কীভাবে এগুলো ব্যবহার করা হয় তা নিয়ে আলোচনা করব।

Event Bubbling

Event Bubbling হল একটি প্রক্রিয়া যেখানে একটি ইভেন্ট প্রথমে তার লক্ষ্যে পৌঁছানোর পর (যেমন, একটি বাটনে ক্লিক করা), ইভেন্টটি সেই লক্ষ্য উপাদানের পিতামাতার উপাদানে (parent element) এবং তারপর তার পরবর্তী পিতামাতার উপাদানে পৌঁছাতে থাকে যতক্ষণ না এটি document অবজেক্টে পৌঁছে। ইভেন্টটি পিতামাতার উপাদানগুলোতে উপরের দিকে ওঠে (bubble up)।

Event Bubbling উদাহরণ:

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

<div id="parentDiv">
    <button id="myButton">Click Me</button>
</div>

<script>
  document.getElementById('myButton').addEventListener('click', function(event) {
    console.log("Button clicked!");
    event.stopPropagation(); // Bubbling বন্ধ করতে পারে
  });

  document.getElementById('parentDiv').addEventListener('click', function(event) {
    console.log("Div clicked!");
  });
</script>

এখানে, যখন button এ ক্লিক করা হবে, ইভেন্টটি প্রথমে button এ পৌঁছাবে এবং তারপর div এর মধ্যে চলে যাবে (এটি ইভেন্ট Bubbling এর উদাহরণ)। যদি event.stopPropagation() ব্যবহার করা হয়, তবে ইভেন্টের Bubbling প্রক্রিয়া থেমে যাবে।

Event Delegation

Event Delegation হল একটি কৌশল যা Event Bubbling ব্যবহার করে, যেখানে আপনি পিতামাতার উপাদানে ইভেন্ট লিসেনার যোগ করেন এবং ঐ উপাদানটির মধ্যে থাকা সব সন্তানের (children) ইভেন্ট হ্যান্ডেল করেন। এর মাধ্যমে আপনি একাধিক উপাদানকে একসাথে ইভেন্ট হ্যান্ডেল করতে পারবেন, বিশেষ করে যখন অনেক ডাইনামিক উপাদান থাকে, যেগুলোর জন্য আলাদাভাবে ইভেন্ট অ্যাটাচ করা একদিকে শক্তিশালী এবং অন্যদিকে অপ্রয়োজনীয় হতে পারে।

Event Delegation উদাহরণ:

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

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  document.getElementById('myList').addEventListener('click', function(event) {
    if (event.target && event.target.nodeName === "LI") {
      console.log("List item clicked: " + event.target.textContent);
    }
  });
</script>

এখানে, আমরা ul পিতামাতার উপাদানে click ইভেন্ট লিসেনার যোগ করেছি এবং event.target এর মাধ্যমে আমরা চেক করছি যে, ক্লিক করা উপাদান LI কিনা। এটি Event Delegation প্যাটার্নের উদাহরণ, যেখানে শুধুমাত্র পিতামাতার উপাদানে ইভেন্ট লিসেনার অ্যাটাচ করা হয়েছে এবং সন্তান উপাদানগুলোকে ট্র্যাক করা হচ্ছে।

Sencha Touch-এ Event Delegation এবং Bubbling ব্যবহার

Sencha Touch-এ আপনি সাধারণ DOM ইভেন্ট হ্যান্ডলিং এর মতোই Event Bubbling এবং Event Delegation ব্যবহার করতে পারেন। তবে, Sencha Touch-এ Ext.EventManager ব্যবহার করা হয় ইভেন্ট হ্যান্ডলিংয়ের জন্য, যা আরও উন্নত এবং মোবাইল ফ্রেন্ডলি ইভেন্ট ম্যানেজমেন্ট সরবরাহ করে।

Sencha Touch-এ Event Delegation:

Sencha Touch-এ Event Delegation প্যাটার্ন ব্যবহার করতে on মেথড ব্যবহার করা হয়, যেখানে আপনি একটি নির্দিষ্ট উপাদানে ইভেন্ট লিসেনার অ্যাটাচ করতে পারেন এবং তারপর সন্তান উপাদানগুলোর উপর ইভেন্ট হ্যান্ডল করতে পারেন।

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'mainpanel',
    config: {
        html: '<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>',
        listeners: {
            element: 'element',  // Event delegation will be applied on the parent element
            delegate: 'li',       // Listen to events on 'li' elements
            click: function(event) {
                alert('List item clicked: ' + event.target.innerText);
            }
        }
    }
});

এখানে, Ext.Panel এর listeners কনফিগারেশন ব্যবহার করে আমরা click ইভেন্ট li উপাদানে ডেলিগেট করেছি। delegate ব্যবহার করে, আমরা পিতামাতার উপাদানে ইভেন্ট অ্যাটাচ করেছি এবং প্রতিটি li উপাদানের জন্য ইভেন্ট হ্যান্ডেল করেছি।

Sencha Touch-এ Event Bubbling:

Sencha Touch-এ Event Bubbling স্বয়ংক্রিয়ভাবে ঘটে, যেহেতু এটি Ext.EventManager ব্যবহার করে DOM ইভেন্ট প্রক্রিয়া পরিচালনা করে। আপনি সাধারণভাবে যে কোনো DOM উপাদানে event.stopPropagation() ব্যবহার করতে পারেন যদি Bubbling থামাতে চান।

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'mainpanel',
    config: {
        html: '<div><button>Click Me</button></div>',
        listeners: {
            element: 'element',
            click: function(event) {
                event.stopPropagation(); // Stop event bubbling
                alert('Button clicked, but bubbling stopped!');
            }
        }
    }
});

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

সারাংশ

Event Delegation এবং Event Bubbling DOM ইভেন্ট হ্যান্ডলিংয়ের গুরুত্বপূর্ণ ধারণা যা Sencha Touch-এ ইভেন্ট ব্যবস্থাপনার ক্ষেত্রে কার্যকরীভাবে ব্যবহার করা হয়। Event Bubbling-এ ইভেন্টটি তার লক্ষ্য উপাদান থেকে পিতামাতার উপাদানগুলোতে পৌঁছায়, এবং Event Delegation-এ আপনি পিতামাতার উপাদানে ইভেন্ট লিসেনার অ্যাটাচ করে তার সন্তান উপাদানগুলোতে ইভেন্ট হ্যান্ডল করতে পারেন। Sencha Touch-এ এই প্যাটার্ন দুটি ব্যবহারের মাধ্যমে ইভেন্ট হ্যান্ডলিং আরও দক্ষ, পারফরম্যান্ট এবং সহজ হয়ে ওঠে।