Para entender a delegação de eventos primeiro, precisamos saber por que e quando realmente precisamos ou queremos a delegação de eventos.
Pode haver muitos casos, mas vamos discutir dois grandes casos de uso para delegação de eventos. 1. O primeiro caso é quando temos um elemento com muitos elementos filhos nos quais estamos interessados. Nesse caso, em vez de adicionar um manipulador de eventos a todos esses elementos filhos, simplesmente o adicionamos ao elemento pai e determinamos em qual elemento filho o evento foi disparado.
2. O segundo caso de uso para delegação de eventos é quando queremos um manipulador de eventos anexado a um elemento que ainda não esteja no DOM quando nossa página é carregada. Isso é claro, porque não podemos adicionar um manipulador de eventos a algo que não está em nossa página, portanto, em um caso de descontinuação que estamos codificando.
Suponha que você tenha uma lista de 0, 10 ou 100 itens no DOM ao carregar sua página e mais itens estejam aguardando em sua mão para serem adicionados à lista. Portanto, não há como anexar um manipulador de eventos para os elementos futuros ou esses elementos ainda não foram adicionados ao DOM e também pode haver muitos itens; portanto, não seria útil ter um manipulador de eventos anexado a cada deles.
Delegação de Eventos
Tudo bem, então, para falar sobre delegação de eventos, o primeiro conceito sobre o qual realmente precisamos falar é a bolha do evento.
Borbulhar evento: borbulhar
evento significa que, quando um evento é disparado ou disparado em algum elemento DOM, por exemplo, clicando em nosso botão aqui na imagem abaixo, o mesmo evento exato também é disparado em todos os elementos pai.
O evento é acionado primeiro no botão, mas também será acionado em todos os elementos pai, um de cada vez; portanto, também será acionado no parágrafo da seção o elemento principal e, na verdade, em uma árvore DOM até o elemento HTML que é a raiz. Então, dizemos que o evento borbulha dentro da árvore DOM, e é por isso que é chamado de bolha.
Elemento de destino: o elemento no qual o evento foi acionado pela primeira vez chamado de elemento de destino; portanto, o elemento que causou o evento é chamado de elemento de destino. No nosso exemplo acima, é claro, foi o botão que foi clicado. A parte importante é que esse elemento de destino seja armazenado como uma propriedade no objeto de evento. Isso significa que todos os elementos-pai nos quais o evento também será acionado conhecerão o elemento de destino do evento, portanto, onde o evento foi disparado pela primeira vez.
Isso nos leva à delegação de eventos porque se o evento surgir na árvore DOM e se soubermos onde o evento foi acionado, podemos simplesmente anexar um manipulador de eventos a um elemento pai e aguardar que o evento borbulhe. faça o que pretendemos fazer com o nosso elemento de destino. Essa técnica é chamada delegação de eventos. Neste exemplo aqui, poderíamos simplesmente adicionar o manipulador de eventos ao elemento principal.
Tudo bem, então, novamente, a delegação de eventos é não configurar o manipulador de eventos no elemento original no qual estamos interessados, mas anexá-lo a um elemento pai e, basicamente, capturar o evento lá porque ele ocorre. Podemos então agir no elemento em que estamos interessados em usar a propriedade do elemento de destino.
Exemplo:
Agora vamos supor que temos dois itens da lista em nossa página, depois de adicionar itens nessas listas programaticamente, queremos excluir um ou mais itens deles. Usando a técnica de delegação de eventos, podemos alcançar nosso objetivo facilmente.
<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>
Adicionando itens nessa lista:
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);
}
Excluir itens:
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);
}
