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 ডেভেলপারদের জন্য শক্তিশালী, মডুলার এবং পুনঃব্যবহারযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।
