इवेंट डेलिगेशन को समझने के लिए पहले हमें यह जानना होगा कि हमें इवेंट डेलिगेशन की आवश्यकता क्यों और कब पड़ती है।
कई मामले हो सकते हैं लेकिन आइए घटना के प्रतिनिधिमंडल के लिए दो बड़े उपयोग के मामलों पर चर्चा करें। 1. पहला मामला तब होता है जब हमारे पास बहुत सारे बाल तत्वों के साथ एक तत्व होता है जिसमें हम रुचि रखते हैं। इस मामले में, इन सभी बाल तत्वों में एक घटना हैंडलर जोड़ने के बजाय, हम इसे मूल तत्व में जोड़ते हैं और फिर निर्धारित करते हैं। जिस पर बाल तत्व ने घटना को अंजाम दिया।
2. इवेंट डेलिगेशन के लिए दूसरा उपयोग मामला तब होता है जब हम एक ऐसा इवेंट हैंडलर चाहते हैं जो किसी ऐसे तत्व से जुड़ा हो जो अभी तक DOM में नहीं है जब हमारा पेज लोड होता है। यह निश्चित रूप से, क्योंकि हम एक घटना हैंडलर को हमारे पेज पर नहीं जोड़ सकते हैं, इसलिए कि हम कोडिंग कर रहे हैं।
मान लें कि जब आप अपना पृष्ठ लोड करते हैं, तो आपके पास DOM में 0, 10, या 100 आइटमों की एक सूची होती है, और अधिक आइटम सूची में जोड़ने के लिए आपके हाथ में प्रतीक्षा कर रहे हैं। इसलिए भविष्य के तत्वों के लिए कोई इवेंट हैंडलर संलग्न करने का कोई तरीका नहीं है या उन तत्वों को DOM में अभी तक नहीं जोड़ा गया है, और इसमें बहुत सारे आइटम भी हो सकते हैं, इसलिए प्रत्येक ईवेंट हैंडलर को एक से जोड़ना उपयोगी नहीं होगा उनमें से।
इवेंट डेलिगेशन
सब ठीक है, इसलिए घटना के प्रतिनिधिमंडल के बारे में बात करने के लिए, पहली अवधारणा जिसे हमें वास्तव में बात करने की आवश्यकता है, वह घटना बुदबुदाती है।
ईवेंट बबलिंग:
ईवेंट बबलिंग का अर्थ है कि जब किसी ईवेंट को किसी DOM तत्व पर निकाल दिया जाता है या ट्रिगर कर दिया जाता है, उदाहरण के लिए हमारे बटन पर यहां क्लिक करके bellow इमेज पर क्लिक किया जाता है, तब सटीक इवेंट भी सभी पेरेंट तत्वों पर चालू हो जाता है।
घटना को पहले बटन पर निकाल दिया जाता है, लेकिन फिर इसे एक बार में सभी मूल तत्वों पर निकाल दिया जाएगा, इसलिए यह पैराग्राफ पर मुख्य तत्व को आग लगा देगा और वास्तव में डोम ट्री में सभी तरह से HTML तत्व तक जो रूट है। तो हम कहते हैं कि ईवेंट डोम ट्री के अंदर उबलता है, और इसीलिए इसे बुबलिंग कहा जाता है।
लक्ष्य तत्व: वह तत्व जिस पर वास्तव में पहली बार गोलीबारी की गई थी उसे लक्ष्य तत्व कहा जाता है, इसलिए जिस तत्व के कारण घटना घटित होती है उसे लक्ष्य तत्व कहा जाता है। हमारे उपरोक्त उदाहरण में, यह निश्चित रूप से, बटन पर क्लिक किया गया था। महत्वपूर्ण हिस्सा यह है कि इस लक्ष्य तत्व को इवेंट ऑब्जेक्ट में एक संपत्ति के रूप में संग्रहीत किया जाता है, इसका मतलब है कि सभी मूल तत्व जिस पर भी आग लगेगी वह घटना के लक्ष्य तत्व को जान लेगा, इसलिए जहां पहली बार घटना हुई थी।
यह हमें घटना के प्रतिनिधिमंडल के लिए लाता है क्योंकि यदि ईवेंट DOM ट्री में बबल करता है, और यदि हमें पता है कि ईवेंट को कहां से निकाल दिया गया है, तो हम किसी ईवेंट हैंडलर को मूल तत्व में संलग्न कर सकते हैं और ईवेंट के बुलबुले बनने का इंतजार कर सकते हैं और हम कर सकते हैं उसके बाद हम जो कुछ भी करना चाहते हैं अपने लक्ष्य तत्व के साथ करते हैं। इस तकनीक को इवेंट डेलिगेशन कहा जाता है। इस उदाहरण में, हम ईवेंट हैंडलर को मुख्य तत्व में जोड़ सकते हैं।
ठीक है, इसलिए, फिर से, घटना के प्रतिनिधिमंडल को उस मूल तत्व पर घटना हैंडलर को स्थापित नहीं करना है जिसे हम रुचि रखते हैं, लेकिन इसे मूल तत्व में संलग्न करने के लिए और, मूल रूप से, इस घटना को पकड़ते हैं क्योंकि यह बुलबुले बनाता है। फिर हम उस तत्व पर कार्य कर सकते हैं जिसे हम लक्ष्य तत्व संपत्ति का उपयोग करने में रुचि रखते हैं।
उदाहरण:
अब मान लें कि हमारे पेज में दो सूची आइटम हैं, उन सूची में आइटम जोड़ने के बाद प्रोग्रामेटिक रूप से हम उनमें से एक या अधिक आइटम हटाना चाहते हैं। घटना प्रतिनिधिमंडल का उपयोग करते हुए हम आसानी से अपने उद्देश्य को प्राप्त कर सकते हैं।
<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);
}
