Event Handling এবং Custom Events

Polymer Framework-এ Event Handling এবং Custom Events ব্যবহারের মাধ্যমে ওয়েব অ্যাপ্লিকেশনগুলিতে ইন্টারঅ্যাক্টিভিটি এবং ইউজার ইন্টারফেসের মধ্যে যোগাযোগ সহজে এবং কার্যকরভাবে তৈরি করা যায়। Polymer ফ্রেমওয়ার্কের মূল বৈশিষ্ট্যগুলির মধ্যে রয়েছে কাস্টম ইভেন্টগুলি তৈরি এবং পরিচালনা করা, যা ওয়েব কম্পোনেন্টের মধ্যে কম্পোনেন্ট-ভিত্তিক ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে।

1. Event Handling in Polymer

Polymer ফ্রেমওয়ার্কে ইভেন্ট হ্যান্ডলিং মূলত DOM Events এর উপর ভিত্তি করে কাজ করে, তবে এটি অনেক সহজ এবং সরল। আপনি কাস্টম ইভেন্ট হ্যান্ডলিং করতে Polymer এর মধ্যে সরাসরি on-event সিনট্যাক্স ব্যবহার করতে পারেন।

Polymer আপনাকে ইভেন্ট হ্যান্ডলিং করতে একটি সরল উপায় দেয়, যেখানে আপনি HTML টেমপ্লেটের মধ্যে on- ইভেন্ট হ্যান্ডলার অ্যাট্রিবিউট ব্যবহার করে ইভেন্ট শোনার (listening) কাজ করতে পারেন।

উদাহরণ:

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

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

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

এখানে কী ঘটছে:

• on-click="handleClick" হল ইভেন্ট হ্যান্ডলার, যা handleClick ফাংশনটিকে কল করে যখন বাটনে ক্লিক করা হবে।
• handleClick ফাংশনটি ইভেন্ট অবজেক্ট (যেমন ক্লিকের তথ্য) গ্রহণ করে এবং তার মধ্যে লগ করে, বা আপনি আরও যেকোনো লজিক প্রয়োগ করতে পারেন।

2. Custom Events in Polymer

Polymer এ Custom Events তৈরি করা অত্যন্ত সহজ। কাস্টম ইভেন্টগুলি এমন ইভেন্ট যেগুলি আপনি নিজে তৈরি করেন, এবং এগুলি সাধারণ DOM ইভেন্টগুলির মতো আচরণ করে। কাস্টম ইভেন্টগুলি বিশেষত তখন কার্যকরী হয় যখন আপনি চান অন্য কোন কম্পোনেন্ট বা স্ক্রিপ্টে কিছু তথ্য প্রেরণ করতে।

কাস্টম ইভেন্ট তৈরি করার উদাহরণ:

ধরা যাক, আপনি একটি কাস্টম ইভেন্ট তৈরি করছেন যেটি একটি নির্দিষ্ট ডেটা পাস করবে এবং তারপর অন্য উপাদানগুলিতে তা প্রেরণ করবে।

<dom-module id="custom-event-example">
  <template>
    <button on-click="sendCustomEvent">Send Event</button>
  </template>

  <script>
    Polymer({
      is: 'custom-event-example',
      sendCustomEvent: function() {
        // Creating a custom event
        const event = new CustomEvent('my-custom-event', {
          bubbles: true,  // Event will bubble up the DOM
          composed: true, // Event can cross shadow DOM boundaries
          detail: { message: 'Hello from Polymer!' } // Custom data
        });
        
        // Dispatching the event
        this.dispatchEvent(event);
      }
    });
  </script>
</dom-module>

এখানে কী ঘটছে:

1. CustomEvent: CustomEvent কন্সট্রাক্টর ব্যবহার করে একটি কাস্টম ইভেন্ট তৈরি করা হয়েছে। ইভেন্টটির নাম 'my-custom-event' এবং এতে একটি detail অবজেক্ট রয়েছে যা কাস্টম ডেটা ধারণ করে (এখানে একটি মেসেজ "Hello from Polymer!")।
2. dispatchEvent: ইভেন্টটি this.dispatchEvent(event) দ্বারা চালু করা হচ্ছে। এটি ইভেন্টটি ডম-এ প্রেরণ করে এবং অন্যান্য উপাদানগুলি এই ইভেন্টটি শোনার মাধ্যমে কাজ করতে পারে।

3. Listening to Custom Events

Polymer কম্পোনেন্টে কাস্টম ইভেন্টগুলি শোনার জন্য আপনাকে addEventListener ব্যবহার করতে হবে বা HTML টেমপ্লেটে on-event-name সিমপ্লেক্স সিনট্যাক্স ব্যবহার করতে হবে।

উদাহরণ:

ধরা যাক, আপনি একটি কম্পোনেন্টের ভিতরে কাস্টম ইভেন্ট শোনার উদাহরণ দেখছেন:

<dom-module id="listener-example">
  <template>
    <custom-event-example on-my-custom-event="handleCustomEvent"></custom-event-example>
  </template>

  <script>
    Polymer({
      is: 'listener-example',
      handleCustomEvent: function(event) {
        console.log('Custom event received:', event.detail.message);
      }
    });
  </script>
</dom-module>

এখানে কী ঘটছে:

1. on-my-custom-event: এই ইভেন্ট হ্যান্ডলার custom-event-example কম্পোনেন্ট থেকে আসা কাস্টম ইভেন্টকে শোনে। যখন my-custom-event ইভেন্টটি ঘটবে, তখন handleCustomEvent ফাংশনটি কল হবে।
2. handleCustomEvent: এই ফাংশনে, event.detail.message ব্যবহার করে কাস্টম ইভেন্টের সাথে প্রেরিত ডেটা পাওয়া যাবে।

4. Event Modifiers in Polymer

Polymer ফ্রেমওয়ার্কে কিছু Event Modifiers ব্যবহার করে ইভেন্টের আচরণ নিয়ন্ত্রণ করা যায়। সাধারণত, bubbles এবং composed প্রপার্টি কাস্টম ইভেন্টে ব্যবহৃত হয়।

• bubbles: এটি ইভেন্টটিকে ডম ট্রি তে বুদ্বুদ করতে দেয়। অর্থাৎ, ইভেন্টটি উপরের স্তরের কম্পোনেন্টগুলিতে পৌঁছতে পারে।
• composed: এটি Shadow DOM এর মধ্যে থাকা ইভেন্টকে বাইরের DOM তে প্রবাহিত হতে দেয়।

উদাহরণ:

const event = new CustomEvent('my-custom-event', {
  bubbles: true,  // Event will bubble up the DOM
  composed: true, // Event can cross shadow DOM boundaries
  detail: { message: 'Data sent through custom event!' }
});

Polymer ফ্রেমওয়ার্কে Event Handling এবং Custom Events ব্যবহারের মাধ্যমে ওয়েব অ্যাপ্লিকেশনগুলিতে ইন্টারঅ্যাকশন এবং ডেটা ফ্লো খুবই সহজ ও কার্যকরভাবে তৈরি করা যায়। কাস্টম ইভেন্টগুলি ওয়েব কম্পোনেন্টগুলির মধ্যে যোগাযোগের একটি শক্তিশালী মাধ্যম, যা সিস্টেমের স্কেল এবং মডুলারিটি বজায় রাখতে সাহায্য করে। Polymer এ ইভেন্ট হ্যান্ডলিং এবং কাস্টম ইভেন্টগুলি ব্যবহার করে আপনি একটি কার্যকরী এবং ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন তৈরি করতে পারবেন।

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

Polymer-এর Event System এর ভূমিকা:

Polymer ফ্রেমওয়ার্কের ইভেন্ট সিস্টেমের মাধ্যমে আপনি কাস্টম উপাদানগুলিতে ইভেন্ট শোনা এবং হ্যান্ডল করতে পারেন। এটি মূলত ইভেন্ট ডেলিগেশন এবং কাস্টম ইভেন্টগুলি তৈরি করার মাধ্যমে কাজ করে, যা ডেটা বা ইউজার ইন্টারঅ্যাকশন পরিবর্তিত হলে উপাদানগুলিতে প্রভাব ফেলে।

Polymer-এ ইভেন্ট সিস্টেমের মূল বৈশিষ্ট্যসমূহ:

1. Event Binding: Polymer এ ইভেন্ট শোনা এবং হ্যান্ডল করার জন্য on-eventName সিনট্যাক্স ব্যবহার করা হয়। এর মাধ্যমে ইভেন্ট লিসেনার হ্যান্ডল করা হয়।
2. Custom Events: আপনি কাস্টম ইভেন্ট তৈরি করতে পারেন যা একটি নির্দিষ্ট উপাদান বা কম্পোনেন্টের মধ্যে ইন্টারঅ্যাকশন প্রকাশ করে।
3. Event Propagation: Polymer ইভেন্ট প্রোপাগেশন (বাবা থেকে সন্তানের দিকে অথবা সন্তানের থেকে বাবা) সাপোর্ট করে, যার মাধ্যমে ইভেন্ট এক উপাদান থেকে অন্য উপাদানে প্রেরিত হতে পারে।
4. Bubbling & Capturing: Polymer এর ইভেন্ট সিস্টেম বব্বলিং এবং ক্যাপচারিং এর মাধ্যমে ইভেন্টগুলি উপাদানগুলির মধ্যে পৌঁছাতে সাহায্য করে।

Polymer এর Event System এর উদাহরণ:

Step 1: Event Binding

Polymer-এ একটি ইভেন্ট শোনার জন্য, আপনি সহজেই HTML টেমপ্লেটের মধ্যে on-eventName সিনট্যাক্স ব্যবহার করতে পারেন।

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

  <script>
    Polymer({
      is: 'my-button',
      handleClick: function(event) {
        alert('Button clicked!');
      }
    });
  </script>
</dom-module>

এখানে, on-click="handleClick" ব্যবহার করে click ইভেন্ট শোনা হয়েছে এবং যখন বাটনে ক্লিক হবে, তখন handleClick ফাংশনটি কল হবে।

Step 2: Custom Events

Polymer-এ আপনি কাস্টম ইভেন্ট তৈরি করতে পারেন, যা একটি উপাদান বা কম্পোনেন্টের মধ্যে ইন্টারঅ্যাকশন প্রকাশ করে। একটি কাস্টম ইভেন্ট তৈরি এবং ডিপ্লয় করার উদাহরণ:

<dom-module id="custom-event-example">
  <template>
    <button on-click="fireCustomEvent">Click to Fire Event</button>
  </template>

  <script>
    Polymer({
      is: 'custom-event-example',
      fireCustomEvent: function() {
        // Creating and dispatching a custom event
        this.dispatchEvent(new CustomEvent('my-custom-event', {
          detail: { message: 'Hello from the custom event!' },
          bubbles: true, // Event will bubble up the DOM
          composed: true // Event will pass through shadow DOM boundaries
        }));
      }
    });
  </script>
</dom-module>

এখানে, fireCustomEvent ফাংশনের মাধ্যমে my-custom-event নামে একটি কাস্টম ইভেন্ট তৈরি করা হয়েছে, এবং সেই ইভেন্টটি CustomEvent কনস্ট্রাক্টর দিয়ে ডিপ্লয় করা হয়েছে। detail এর মাধ্যমে ইভেন্টে ডেটা পাঠানো হয়েছে।

Step 3: Event Handling with Custom Events

কাস্টম ইভেন্টটি অন্য একটি উপাদানে শোনা এবং হ্যান্ডল করা যেতে পারে। উদাহরণস্বরূপ:

<dom-module id="event-listener">
  <template>
    <custom-event-example on-my-custom-event="handleCustomEvent"></custom-event-example>
  </template>

  <script>
    Polymer({
      is: 'event-listener',
      handleCustomEvent: function(event) {
        console.log('Received custom event:', event.detail.message);
      }
    });
  </script>
</dom-module>

এখানে, event-listener উপাদান on-my-custom-event="handleCustomEvent" এর মাধ্যমে my-custom-event ইভেন্টটি শুনছে এবং handleCustomEvent ফাংশনটি কল হচ্ছে যখন কাস্টম ইভেন্টটি ট্রিগার হয়। ইভেন্টের detail প্রপার্টি থেকে ডেটা অ্যাক্সেস করা হচ্ছে।

Event Propagation (Bubbling and Capturing):

Polymer ইভেন্ট প্রোপাগেশন সাপোর্ট করে, যার মাধ্যমে ইভেন্টটি DOM এর মধ্যে উপরে বা নিচে ভ্রমণ করতে পারে।

• Bubbling: একটি ইভেন্ট একে একে প্যারেন্ট উপাদানের দিকে প্রপাগেট হয়। এটি ডিফল্ট আচরণ।
• Capturing: ইভেন্টটি উপরের উপাদান থেকে নীচে আসে।

এখন যদি আপনার কাস্টম ইভেন্টটি বব্বলিং বা ক্যাপচারিং করে, তবে আপনি সেই আচরণ নিয়ন্ত্রণ করতে পারেন।

Example of Event Propagation (Bubbling):

<dom-module id="bubbling-example">
  <template>
    <div on-click="handleDivClick">
      <button on-click="handleButtonClick">Click Me</button>
    </div>
  </template>

  <script>
    Polymer({
      is: 'bubbling-example',
      handleButtonClick: function(event) {
        console.log('Button clicked!');
        // Stop event from bubbling up
        event.stopPropagation();
      },
      handleDivClick: function() {
        console.log('Div clicked!');
      }
    });
  </script>
</dom-module>

এখানে, বাটন ক্লিক করলে handleButtonClick ফাংশনটি কল হবে, এবং ইভেন্টটি বাবলিং করার আগে event.stopPropagation() দিয়ে বাচানো হবে, ফলে handleDivClick ফাংশনটি কল হবে না।

Polymer Event System এর মূল বৈশিষ্ট্যসমূহ:

1. নামকরণ কাস্টম ইভেন্ট: Polymer ইভেন্টের নামকরণের জন্য on-<event-name> সিনট্যাক্স ব্যবহার করে, যা কাস্টম উপাদানে ইভেন্ট হ্যান্ডলিং সহজ করে তোলে।
2. ডেটা শেয়ারিং: কাস্টম ইভেন্টগুলির মাধ্যমে ডেটা শেয়ার করা যায় detail প্রপার্টির মাধ্যমে, যা ইভেন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য ধারণ করে।
3. বাবলিং এবং ক্যাপচারিং: ইভেন্টগুলি বাবা থেকে সন্তান বা সন্তান থেকে বাবা পর্যায়ে পৌঁছানোর জন্য বাবলিং এবং ক্যাপচারিং সাপোর্ট করে।
4. স্বয়ংক্রিয় ডাটা-বাইন্ডিং: Polymer-এর ডাটা-বাইন্ডিং সিস্টেমের সাথে ইভেন্ট হ্যান্ডলিং একসাথে কাজ করে, যা UI এবং ডেটা মডেলের মধ্যে স্বয়ংক্রিয়ভাবে সিঙ্ক্রোনাইজেশন নিশ্চিত করে।

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

Polymer ফ্রেমওয়ার্কে Built-in Events এবং Custom Events ব্যবস্থাপনা খুবই গুরুত্বপূর্ণ, কারণ এগুলির মাধ্যমে ওয়েব অ্যাপ্লিকেশনের ইন্টারঅ্যাকটিভিটি এবং ডেটা ফ্লো নিয়ন্ত্রণ করা যায়। Polymer এ ইভেন্টগুলি হ্যান্ডেল করা সহজ এবং শক্তিশালী, যা ডেভেলপারদের দ্রুত এবং কার্যকরভাবে ইন্টারফেস তৈরি করতে সহায়তা করে।

1. Built-in Events:

Polymer ফ্রেমওয়ার্কে কিছু Built-in Events রয়েছে যা সাধারণভাবে ব্যবহৃত হয়, যেমন ক্লিক, কিবোর্ড ইভেন্ট, মাউস ইভেন্ট ইত্যাদি। এই ইভেন্টগুলি সাধারণ HTML ইভেন্টগুলির মতোই কাজ করে, তবে Polymer-এ কিছু অতিরিক্ত সুবিধা পাওয়া যায় যেমন ডাটা বাইন্ডিং এবং মডুলার উপাদান ব্যবস্থাপনা।

Built-in Events এর উদাহরণ:

• click: একটি বাটনে ক্লিক করার ইভেন্ট।
• keydown: কীবোর্ডের কী চাপার ইভেন্ট।
• change: ইনপুট ফিল্ডের মান পরিবর্তন হওয়ার ইভেন্ট।
• focus: ইনপুট বা এলিমেন্টে ফোকাস করার ইভেন্ট।

উদাহরণ:

<template>
  <button on-click="handleClick">Click Me</button>
</template>

<script>
  class MyElement extends Polymer.Element {
    static get is() {
      return 'my-element';
    }

    handleClick() {
      console.log('Button clicked!');
    }
  }

  customElements.define(MyElement.is, MyElement);
</script>

এখানে, on-click ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যখন বাটনে ক্লিক করা হবে, তখন handleClick ফাংশনটি কল হবে।

2. Custom Events:

Polymer ফ্রেমওয়ার্কে Custom Events ব্যবহারের মাধ্যমে আপনি আপনার কাস্টম উপাদানগুলির জন্য নিজস্ব ইভেন্ট তৈরি করতে পারেন। এটি বিশেষত উপাদানগুলির মধ্যে যোগাযোগ (communication) এবং ডেটা ফ্লো পরিচালনা করার জন্য দরকারী।

Custom Event তৈরি করা:

Polymer-এ কাস্টম ইভেন্ট তৈরি করতে CustomEvent কন্সট্রাকটর ব্যবহার করা হয়। এই ইভেন্টে আপনি কাস্টম ডেটা পাঠাতে পারবেন এবং ইভেন্টটি কাস্টম উপাদানে dispatchEvent মেথডের মাধ্যমে ট্রিগার করতে পারবেন।

Custom Event এর উদাহরণ:

<template>
  <button on-click="triggerCustomEvent">Trigger Custom Event</button>
</template>

<script>
  class MyElement extends Polymer.Element {
    static get is() {
      return 'my-element';
    }

    triggerCustomEvent() {
      const customEvent = new CustomEvent('custom-event', {
        detail: { message: 'Hello from custom event!' },
        bubbles: true, // Event will bubble up through DOM
        composed: true // Event will be dispatched across shadow DOM boundaries
      });

      this.dispatchEvent(customEvent);
    }
  }

  customElements.define(MyElement.is, MyElement);
</script>

এখানে, triggerCustomEvent ফাংশনটি একটি কাস্টম ইভেন্ট তৈরি করছে এবং এটি dispatchEvent ব্যবহার করে ট্রিগার করা হচ্ছে। detail এর মধ্যে কাস্টম ডেটা (যেমন এখানে message) পাঠানো হচ্ছে।

Custom Event Listener সেট করা:

Polymer-এ কাস্টম ইভেন্ট শোনা (listen) এবং তার উপর প্রক্রিয়া করার জন্য, আপনি addEventListener বা on-[event-name] ব্যবহার করতে পারেন।

<template>
  <button on-click="triggerCustomEvent">Trigger Custom Event</button>
  <p>Received Message: [[message]]</p>
</template>

<script>
  class MyElement extends Polymer.Element {
    static get is() {
      return 'my-element';
    }

    static get properties() {
      return {
        message: {
          type: String,
          value: ''
        }
      };
    }

    ready() {
      super.ready();
      this.addEventListener('custom-event', this.handleCustomEvent);
    }

    triggerCustomEvent() {
      const customEvent = new CustomEvent('custom-event', {
        detail: { message: 'Hello from custom event!' },
        bubbles: true,
        composed: true
      });
      this.dispatchEvent(customEvent);
    }

    handleCustomEvent(event) {
      this.message = event.detail.message;
    }
  }

  customElements.define(MyElement.is, MyElement);
</script>

এখানে, handleCustomEvent ফাংশনটি কাস্টম ইভেন্টের রেসপন্সে ডেটা (message) গ্রহণ করছে এবং সেটিকে উপাদানের প্রপার্টিতে সেভ করছে। এছাড়া, addEventListener ব্যবহার করে ইভেন্ট শোনা হচ্ছে।

3. Event Bubbling এবং Composed:

• Event Bubbling: এটি নিশ্চিত করে যে ইভেন্টটি DOM গাছের উপর উপরের দিকে উঠে যায় (parent elements পর্যন্ত), যা সাধারণ HTML ইভেন্টের মতো কাজ করে।
• Composed: এটি কাস্টম ইভেন্টকে শ্যাডো DOM সীমারেখা (shadow DOM boundary) পেরিয়ে অন্য অংশে পাঠানোর অনুমতি দেয়। Polymer এ এইটি গুরুত্বপূর্ণ কারণ এটি শ্যাডো DOM ব্যবহার করে থাকে।

Event Bubbling এবং Composed উদাহরণ:

<template>
  <div>
    <button on-click="triggerCustomEvent">Trigger Custom Event</button>
  </div>
</template>

<script>
  class MyElement extends Polymer.Element {
    static get is() {
      return 'my-element';
    }

    triggerCustomEvent() {
      const customEvent = new CustomEvent('custom-event', {
        detail: { message: 'Hello!' },
        bubbles: true,
        composed: true
      });
      this.dispatchEvent(customEvent);
    }
  }

  customElements.define(MyElement.is, MyElement);
</script>

এখানে bubbles: true এবং composed: true প্রপার্টি ব্যবহার করা হয়েছে, যা নিশ্চিত করে যে কাস্টম ইভেন্টটি উপরের DOM উপাদানে পৌঁছাবে এবং শ্যাডো DOM এর বাইরে কাজ করবে।

4. Event Delegation:

Polymer ফ্রেমওয়ার্কে ইভেন্ট ডেলিগেশন ব্যবস্থাপনা খুবই সহজ, কারণ আপনি পারেন্ট উপাদানে ইভেন্ট শোনার (listening) ব্যবস্থা করতে পারেন এবং তা চাইল্ড উপাদান থেকে ইভেন্ট পেতে পারেন।

Event Delegation উদাহরণ:

<template>
  <div on-click="handleClick">
    <button>Click Me</button>
  </div>
</template>

<script>
  class MyElement extends Polymer.Element {
    static get is() {
      return 'my-element';
    }

    handleClick(event) {
      console.log('Button clicked!');
    }
  }

  customElements.define(MyElement.is, MyElement);
</script>

এখানে, on-click ইভেন্ট পারেন্ট div উপাদানে বসানো হয়েছে, এবং এই ইভেন্টটি চাইল্ড button উপাদানে ট্রিগার করা হলে সেটি পারেন্টে পৌঁছাবে।

Polymer ফ্রেমওয়ার্কে Built-in Events এবং Custom Events ব্যবস্থাপনা খুবই সহজ এবং কার্যকরী। আপনি ইভেন্ট হ্যান্ডলার ব্যবহার করে DOM উপাদানগুলির সাথে যোগাযোগ করতে পারেন এবং কাস্টম ইভেন্টের মাধ্যমে উপাদানগুলির মধ্যে যোগাযোগ ও ডেটা বিনিময় করতে পারেন। Polymer এর ইভেন্ট ব্যবস্থাপনা API ডেভেলপারদের জন্য শক্তিশালী, মডুলার এবং পুনঃব্যবহারযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

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-এ এই দুটি ধারণা একত্রে ব্যবহৃত হয় যা কোডের পুনঃব্যবহারযোগ্যতা এবং সুশৃঙ্খলতা নিশ্চিত করে।

Polymer ফ্রেমওয়ার্কে Custom Events তৈরি এবং dispatch (প্রেরণ) করা একটি খুবই গুরুত্বপূর্ণ কনসেপ্ট। Custom Events ব্যবহার করে আপনি উপাদানগুলির মধ্যে যোগাযোগ করতে পারেন, যেখানে উপাদানগুলি একে অপরকে জানাতে পারে বা ইনফরমেশন আদান-প্রদান করতে পারে। Polymer এ Custom Events তৈরি এবং dispatch করার জন্য, আপনি CustomEvent কনস্ট্রাক্টর এবং dispatchEvent() মেথড ব্যবহার করতে পারেন।

এখানে Custom Events তৈরি করা এবং dispatch করা সম্পর্কে বিস্তারিত ব্যাখ্যা দেওয়া হলো।

১. Custom Event তৈরি করা

Polymer-এ Custom Event তৈরি করতে CustomEvent কনস্ট্রাক্টর ব্যবহার করা হয়। এর মাধ্যমে আপনি একটি কাস্টম ইভেন্ট তৈরি করতে পারেন যা প্রয়োজনীয় তথ্য এবং ইভেন্টের নাম ধারণ করবে।

Custom Event তৈরি করার উদাহরণ:

<dom-module id="custom-event-example">
  <template>
    <button onclick="dispatchCustomEvent()">Click Me</button>
  </template>

  <script>
    Polymer({
      is: 'custom-event-example',

      dispatchCustomEvent: function() {
        // Custom Event তৈরি করা
        const customEvent = new CustomEvent('myCustomEvent', {
          detail: {
            message: 'Hello from Custom Event!',
            timestamp: new Date().toISOString()
          },
          bubbles: true, // ইভেন্টটি উপরের এলিমেন্টে বুবল করবে
          composed: true // ইভেন্টটি Shadow DOM-এর বাইরে যাবে
        });

        // ইভেন্ট ডিপ্যাচ করা
        this.dispatchEvent(customEvent);
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. CustomEvent কনস্ট্রাক্টর: এটি একটি কাস্টম ইভেন্ট তৈরি করতে ব্যবহৃত হয়। এখানে myCustomEvent নামের কাস্টম ইভেন্ট তৈরি করা হয়েছে।
2. detail: এটি ইভেন্টের সাথে অতিরিক্ত ডেটা প্রেরণ করার জন্য ব্যবহৃত হয়। এখানে একটি message এবং timestamp পাঠানো হয়েছে।
3. bubbles: যদি এটি true হয়, ইভেন্টটি উপরের এলিমেন্টে বুবল করবে, অর্থাৎ Parent এলিমেন্টে পৌঁছাবে।
4. composed: এটি true হলে, ইভেন্টটি Shadow DOM-এর বাইরে যেতে পারবে।
5. dispatchEvent(): এই মেথডটি ইভেন্টটিকে ডিপ্যাচ বা প্রেরণ করার জন্য ব্যবহৃত হয়।

২. Custom Event Listen করা

এখন, কিভাবে এই Custom Event কে সুনা (Listen) করা যায় তা দেখে নেওয়া যাক। Polymer কম্পোনেন্টে ইভেন্ট লিসেনিং এর জন্য আপনি addEventListener বা Polymer-এর ইভেন্ট মেকানিজম ব্যবহার করতে পারেন।

Custom Event Listen করার উদাহরণ:

<dom-module id="event-listener-example">
  <template>
    <custom-event-example id="customEventComponent"></custom-event-example>
  </template>

  <script>
    Polymer({
      is: 'event-listener-example',

      ready: function() {
        // Custom Event Listener যোগ করা
        this.$.customEventComponent.addEventListener('myCustomEvent', this.handleCustomEvent);
      },

      handleCustomEvent: function(event) {
        // ইভেন্ট হ্যান্ডলিং
        console.log('Custom Event received!');
        console.log('Message:', event.detail.message);
        console.log('Timestamp:', event.detail.timestamp);
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. addEventListener: myCustomEvent নামের ইভেন্টটি লিসেন করা হচ্ছে এবং যখন এই ইভেন্টটি ঘটে, তখন handleCustomEvent ফাংশনটি কল হবে।
2. handleCustomEvent: এই ফাংশনটি ইভেন্টের ডেটা (যেমন message এবং timestamp) কনসোলে লগ করে দেখাবে।

৩. Custom Event Dispatching এবং Handling

আপনার কাস্টম ইভেন্ট তৈরি এবং dispatch করার জন্য, আপনি একাধিক উপাদান বা ওয়েব কম্পোনেন্ট ব্যবহার করতে পারেন। ইভেন্ট বুবলিং এবং কম্পোজড অপশন ব্যবহার করে আপনি নিশ্চিত করতে পারেন যে ইভেন্টটি ডম ট্রিতে উপরে (parent) পৌঁছাবে এবং Shadow DOM-এর বাইরেও প্রেরিত হবে।

অতিরিক্ত টিপস:

• bubbles এবং composed প্রপার্টি ব্যবহার করে আপনি কাস্টম ইভেন্টের প্রকৃতি নিয়ন্ত্রণ করতে পারেন।
• detail প্রপার্টি ব্যবহার করে আপনি কাস্টম ডেটা প্রেরণ করতে পারেন, যা ইভেন্ট হ্যান্ডলারের মাধ্যমে অ্যাক্সেস করা যাবে।
• আপনি Polymer ফ্রেমওয়ার্কের @eventname ডেকোরেটরও ব্যবহার করতে পারেন (Polymer 3.0 বা LitElement-এ), যা ইভেন্ট হ্যান্ডলিংকে আরও সহজ করে।

৪. একাধিক কাস্টম ইভেন্ট Dispatch করা

যদি আপনি একাধিক কাস্টম ইভেন্ট dispatch করতে চান, তাহলে আপনি সেই ইভেন্টগুলো আলাদা আলাদা ডিপ্যাচ করতে পারেন বা একই ইভেন্টের মাধ্যমে একাধিক ডেটা পাঠাতে পারেন।

<dom-module id="multi-event-example">
  <template>
    <button onclick="dispatchMultipleEvents()">Dispatch Multiple Events</button>
  </template>

  <script>
    Polymer({
      is: 'multi-event-example',

      dispatchMultipleEvents: function() {
        const eventOne = new CustomEvent('eventOne', {
          detail: { message: 'First event' }
        });
        this.dispatchEvent(eventOne);

        const eventTwo = new CustomEvent('eventTwo', {
          detail: { message: 'Second event' }
        });
        this.dispatchEvent(eventTwo);
      }
    });
  </script>
</dom-module>

এখানে, দুটি আলাদা কাস্টম ইভেন্ট (eventOne এবং eventTwo) ডিপ্যাচ করা হয়েছে।

Polymer ফ্রেমওয়ার্কে Custom Events তৈরি এবং dispatch করা একটি গুরুত্বপূর্ণ টপিক যা আপনার উপাদানগুলির মধ্যে যোগাযোগ স্থাপন করতে সহায়তা করে। আপনি CustomEvent কনস্ট্রাক্টর ব্যবহার করে কাস্টম ইভেন্ট তৈরি করতে পারেন এবং dispatchEvent() মেথড দিয়ে এগুলো ডিপ্যাচ করতে পারেন। কাস্টম ইভেন্টগুলি খুবই ফ্লেক্সিবল, এবং তাদের সাথে অতিরিক্ত ডেটা প্রেরণ করা সম্ভব, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে।