Per capire prima la delega degli eventi, dobbiamo sapere perché e quando effettivamente abbiamo bisogno o vogliamo la delega degli eventi.
Potrebbero esserci molti casi, ma discutiamo di due casi d'uso importanti per la delega degli eventi. 1. Il primo caso è quando abbiamo un elemento con molti elementi figlio che ci interessano. In questo caso, invece di aggiungere un gestore eventi a tutti questi elementi figlio, lo aggiungiamo semplicemente all'elemento padre e quindi determiniamo su quale elemento figlio l'evento è stato generato.
2.Il secondo caso d'uso per la delega di eventi è quando vogliamo un gestore di eventi collegato a un elemento che non è ancora nel DOM quando viene caricata la nostra pagina. Questo, ovviamente, perché non possiamo aggiungere un gestore di eventi a qualcosa che non è sulla nostra pagina, quindi in caso di deprecazione stiamo codificando.
Supponiamo di avere un elenco di 0, 10 o 100 elementi nel DOM quando carichi la pagina e che altri elementi siano in attesa di aggiungerli nell'elenco. Quindi non c'è modo di collegare un gestore di eventi per gli elementi futuri o quegli elementi non sono ancora stati aggiunti nel DOM, e inoltre potrebbero esserci molti elementi, quindi non sarebbe utile avere un gestore di eventi collegato a ciascuno di loro.
Delegazione di eventi
Va bene, quindi per parlare della delega degli eventi, il primo concetto di cui dobbiamo effettivamente parlare è il gorgoglio degli eventi.
Bubbling di eventi: il bubbling di
eventi significa che quando un evento viene attivato o attivato su un elemento DOM, ad esempio facendo clic sul nostro pulsante qui sull'immagine qui sotto, lo stesso evento esatto viene attivato anche su tutti gli elementi principali.
L'evento viene prima attivato sul pulsante, ma poi verrà attivato anche su tutti gli elementi padre uno alla volta, quindi si attiverà anche sul paragrafo nella sezione dell'elemento principale e fino in fondo in un albero DOM fino all'elemento HTML che è la radice. Quindi diciamo che l'evento bolle all'interno dell'albero DOM, ed è per questo che si chiama gorgogliamento.
Elemento target: l'elemento su cui l'evento è stato effettivamente generato per la prima volta chiamato elemento target, quindi l'elemento che ha causato l'evento, è chiamato elemento target. Nel nostro esempio qui sopra è, ovviamente, il pulsante che è stato cliccato. La parte importante è che questo elemento target viene memorizzato come proprietà nell'oggetto evento, Ciò significa che tutti gli elementi parent su cui verrà generato l'evento conosceranno anche l'elemento target dell'evento, quindi dove l'evento è stato generato per la prima volta.
Questo ci porta alla delegazione degli eventi perché se l'evento si verifica nella struttura ad albero DOM e se sappiamo dove l'evento è stato generato, possiamo semplicemente collegare un gestore eventi a un elemento padre e attendere che l'evento si riempia di bolle, e possiamo quindi fare tutto ciò che intendevamo fare con il nostro elemento target. Questa tecnica è chiamata delega degli eventi. In questo esempio, potremmo semplicemente aggiungere il gestore eventi all'elemento principale.
Va bene, quindi, ancora una volta, la delega degli eventi non è quella di impostare il gestore eventi sull'elemento originale a cui siamo interessati ma di collegarlo a un elemento padre e, in sostanza, catturare l'evento lì perché bolle. Possiamo quindi agire sull'elemento che ci interessa utilizzare la proprietà dell'elemento target.
Esempio:
ora supponiamo che nella nostra pagina siano presenti due voci di elenco, dopo aver aggiunto a livello di codice elementi in tale elenco, vogliamo eliminare uno o più elementi da essi. Usando la tecnica di delega di eventi possiamo raggiungere facilmente il nostro scopo.
<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>
Aggiunta di elementi in tali elenchi:
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);
}
Elimina elementi:
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);
}
