ইভেন্টের প্রতিনিধি বোঝার জন্য প্রথমে আমাদের জানতে হবে কেন এবং কখন আমাদের ইভেন্টের প্রতিনিধি প্রয়োজন হয়।
অনেকগুলি মামলা হতে পারে তবে আসুন আমরা প্রতিনিধি দলের জন্য দুটি বড় ব্যবহারের ক্ষেত্রে আলোচনা করি। ১. প্রথম ক্ষেত্রে হ'ল আমাদের যখন আগ্রহী প্রচুর শিশু উপাদানগুলির সাথে একটি উপাদান থাকে। এক্ষেত্রে এই সমস্ত শিশু উপাদানগুলিতে ইভেন্ট হ্যান্ডলার যুক্ত করার পরিবর্তে আমরা কেবল এটি প্যারেন্ট উপাদানগুলিতে যুক্ত করি এবং তারপরে নির্ধারণ করি যার ভিত্তিতে শিশু উপাদানটি বরখাস্ত করা হয়েছিল।
২. ইভেন্টের প্রতিনিধিদের জন্য দ্বিতীয় ব্যবহারের ঘটনাটি হ'ল যখন আমরা কোনও ইভেন্ট হ্যান্ডলারটি এমন কোনও উপাদানটির সাথে সংযুক্ত করতে চাই যা আমাদের পৃষ্ঠাটি লোড করা হয় তখনও ডিওমে নেই। এটি অবশ্যই, কারণ আমরা এমন কোনও ইভেন্টের হ্যান্ডলার যুক্ত করতে পারি না যা আমাদের পৃষ্ঠায় নেই, তাই অবচয়ের ক্ষেত্রে আমরা কোড করছি।
ধরুন আপনি পৃষ্ঠাটি লোড করার সময় আপনার কাছে 0, 10, বা 100 আইটেমের একটি তালিকা রয়েছে এবং আরও আইটেমগুলি তালিকায় যুক্ত হওয়ার জন্য আপনার হাতে অপেক্ষা করছে। সুতরাং ভবিষ্যতের উপাদানগুলির জন্য ইভেন্ট হ্যান্ডলার সংযুক্ত করার কোনও উপায় নেই বা সেই উপাদানগুলি এখনও ডিওমে যোগ করা হয়নি এবং এছাড়াও প্রচুর আইটেম থাকতে পারে, সুতরাং প্রতিটি ইভেন্টের সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত হওয়া কার্যকর হবে না would তাদের মধ্যে.
ইভেন্ট ডেলিগেশন
ঠিক আছে, তাই ইভেন্টের প্রতিনিধিদের বিষয়ে কথা বলার জন্য, আমাদের প্রথম ধারণার কথা বলতে হবে যা হ'ল ইভেন্ট বুবলিং।
ইভেন্ট বুদবুদ:
ইভেন্ট বুদবুদ দেওয়ার অর্থ যখন কোনও ইভেন্টটি কোনও ডিওএম উপাদানকে বহিস্কার করা হয় বা ট্রিগার করা হয়, উদাহরণস্বরূপ বেলো চিত্রটিতে আমাদের বোতামটি ক্লিক করে, তখন ঠিক একই ঘটনাটি প্যারেন্ট উপাদানগুলির সমস্তটিতেও ট্রিগার হয়।
ইভেন্টটি প্রথমে বোতামে চালিত হয়, তবে তারপরে এটি একবারে সমস্ত প্যারেন্ট উপাদানগুলিতেও ছুঁড়ে ফেলা হবে, সুতরাং এটি অনুচ্ছেদে মূল উপাদানটি এবং অন্যদিকে ডম গাছের সমস্ত অংশে আগুন ধরিয়ে দেবে যতক্ষণ না এইচটিএমএল উপাদান মূল is সুতরাং আমরা বলি যে ইভেন্টটি ডম গাছের অভ্যন্তরে বুদবুদ হয়ে যায় এবং এজন্য একে বুদবুদ বলা হয়।
টার্গেট এলিমেন্ট: যে উপাদানটির উপরে ইভেন্টটি প্রথমে গুলি করা হয়েছিল তাকে টার্গেট এলিমেন্ট বলে, সুতরাং যে উপাদানটি ইভেন্টটি ঘটায় তাকে লক্ষ্য উপাদান বলে। আমাদের উপরের উদাহরণে এটি এখানে অবশ্যই আছে, বোতামটি ক্লিক করা হয়েছিল। গুরুত্বপূর্ণ অংশটি হ'ল এই টার্গেট এলিমেন্টটি ইভেন্ট অবজেক্টে সম্পত্তি হিসাবে সংরক্ষণ করা হয়, এর অর্থ হল যে সমস্ত পিতামন্ডল যে ইভেন্টগুলিতে ঘটনাটি চালায় সেগুলি ইভেন্টের লক্ষ্য উপাদানটি জানতে পারে, তাই যেখানে ইভেন্টটি প্রথম চালিত হয়েছিল।
এটি আমাদের ইভেন্টের প্রতিনিধিদের কাছে নিয়ে আসে কারণ যদি ইভেন্টটি ডিওএম গাছে বুদবুদ হয়, এবং যদি ঘটনাটি কোথায় চালানো হয়েছিল তা যদি আমরা জানতে পারি তবে আমরা কেবল একটি ইভেন্ট হ্যান্ডলারকে পিতামাতার সাথে সংযুক্ত করতে পারি এবং ইভেন্টটি বুদবুদ হওয়ার জন্য অপেক্ষা করতে পারি, এবং আমরা পারি তারপরে আমরা আমাদের লক্ষ্য উপাদানটির সাথে যা কিছু করতে চাইছি তা করুন। এই কৌশলটিকে ইভেন্ট প্রতিনিধি বলা হয়। এখানে এই উদাহরণে, আমরা কেবল ইভেন্ট হ্যান্ডলারটি মূল উপাদানটিতে যুক্ত করতে পারি।
ঠিক আছে, আবার, ইভেন্ট প্রতিনিধি হ'ল আমরা যে আগ্রহী সেই মূল উপাদানটির উপর ইভেন্ট হ্যান্ডলারটি স্থাপন না করে এটি একটি পিতামাতার সাথে সংযুক্ত করা এবং মূলত ইভেন্টটি সেখানে ধরা কারণ এটি বুদবুদ। তারপরে আমরা সেই এলিমেন্টটির সাথে কাজ করতে পারি যা আমরা লক্ষ্য উপাদানগুলির সম্পত্তিটি ব্যবহার করতে আগ্রহী।
উদাহরণ:
এখন ধরে নেওয়া যাক যে আমাদের পৃষ্ঠাতে দুটি তালিকা আইটেম রয়েছে, প্রোগ্রামগুলির তালিকায় আইটেম যুক্ত করার পরে আমরা সেগুলি থেকে এক বা একাধিক আইটেম মুছতে চাই। ইভেন্ট ডেলিগেশন টেকনিউক ব্যবহার করে আমরা সহজেই আমাদের পুরুপোজটি অর্জন করতে পারি।
<div class="body">
<div class="top">
</div>
<div class="bottom">
<div class="other">
<!-- other bottom elements -->
</div>
<div class="container clearfix">
<div class="income">
<h2 class="icome__title">Income</h2>
<div class="income__list">
<!-- list items -->
</div>
</div>
<div class="expenses">
<h2 class="expenses__title">Expenses</h2>
<div class="expenses__list">
<!-- list items -->
</div>
</div>
</div>
</div>
</div>
এই তালিকায় আইটেম যুক্ত করা:
const DOMstrings={
type:{
income:'inc',
expense:'exp'
},
incomeContainer:'.income__list',
expenseContainer:'.expenses__list',
container:'.container'
}
var addListItem = function(obj, type){
//create html string with the place holder
var html, element;
if(type===DOMstrings.type.income){
element = DOMstrings.incomeContainer
html = `<div class="item clearfix" id="inc-${obj.id}">
<div class="item__description">${obj.descripiton}</div>
<div class="right clearfix">
<div class="item__value">${obj.value}</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>`
}else if (type ===DOMstrings.type.expense){
element=DOMstrings.expenseContainer;
html = ` <div class="item clearfix" id="exp-${obj.id}">
<div class="item__description">${obj.descripiton}</div>
<div class="right clearfix">
<div class="item__value">${obj.value}</div>
<div class="item__percentage">21%</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>`
}
var htmlObject = document.createElement('div');
htmlObject.innerHTML=html;
document.querySelector(element).insertAdjacentElement('beforeend', htmlObject);
}
আইটেমগুলি মুছুন:
var ctrlDeleteItem = function(event){
// var itemId = event.target.parentNode.parentNode.parentNode.parentNode.id;
var parent = event.target.parentNode;
var splitId, type, ID;
while(parent.id===""){
parent = parent.parentNode
}
if(parent.id){
splitId = parent.id.split('-');
type = splitId[0];
ID=parseInt(splitId[1]);
}
deleteItem(type, ID);
deleteListItem(parent.id);
}
var deleteItem = function(type, id){
var ids, index;
ids = data.allItems[type].map(function(current){
return current.id;
});
index = ids.indexOf(id);
if(index>-1){
data.allItems[type].splice(index,1);
}
}
var deleteListItem = function(selectorID){
var element = document.getElementById(selectorID);
element.parentNode.removeChild(element);
}
