Para comprender primero la delegación de eventos, necesitamos saber por qué y cuándo realmente necesitamos o queremos la delegación de eventos.
Puede haber muchos casos, pero analicemos dos grandes casos de uso para la delegación de eventos. 1. El primer caso es cuando tenemos un elemento con muchos elementos secundarios que nos interesan. En este caso, en lugar de agregar un controlador de eventos a todos estos elementos secundarios, simplemente lo agregamos al elemento principal y luego determinamos en qué elemento hijo se activó el evento.
2. El segundo caso de uso para la delegación de eventos es cuando queremos un controlador de eventos adjunto a un elemento que aún no está en el DOM cuando se carga nuestra página. Eso es, por supuesto, porque no podemos agregar un controlador de eventos a algo que no está en nuestra página, por lo que en caso de desaprobación que estamos codificando.
Suponga que tiene una lista de 0, 10 o 100 elementos en el DOM cuando carga su página, y hay más elementos esperando en su mano para agregar en la lista. Por lo tanto, no hay forma de adjuntar un controlador de eventos para los elementos futuros o esos elementos aún no se agregan en el DOM, y también puede haber muchos elementos, por lo que no sería útil tener un controlador de eventos adjunto a cada uno de ellos.
Delegación de eventos
Muy bien, entonces, para hablar sobre la delegación de eventos, el primer concepto del que realmente necesitamos hablar es el burbujeo de eventos.
Evento burbujeante: el
evento burbujeante significa que cuando un evento se dispara o se activa en algún elemento DOM, por ejemplo haciendo clic en nuestro botón aquí en la imagen de abajo, entonces el mismo evento exacto también se activa en todos los elementos principales.
El evento se dispara primero en el botón, pero luego también se disparará en todos los elementos principales, uno a la vez, por lo que también se disparará en el párrafo a la sección del elemento principal y, de hecho, en un árbol DOM. hasta el elemento HTML que es la raíz. Entonces decimos que el evento aparece dentro del árbol DOM, y por eso se llama burbujeo.
Elemento objetivo: El elemento en el que el evento se disparó primero se llama elemento objetivo, por lo que el elemento que causó el evento se llama elemento objetivo. En nuestro ejemplo anterior aquí es, por supuesto, el botón en el que se hizo clic. La parte importante es que este elemento objetivo se almacena como una propiedad en el objeto del evento. Esto significa que todos los elementos primarios en los que también se disparará el evento conocerán el elemento objetivo del evento, por lo que el evento se disparó por primera vez.
Eso nos lleva a la delegación de eventos. porque si el evento aparece en el árbol DOM y si sabemos dónde se activó el evento, simplemente podemos adjuntar un controlador de eventos a un elemento padre y esperar a que el evento se desarrolle, y podemos luego haga lo que pretendemos hacer con nuestro elemento objetivo. Esta técnica se llama delegación de eventos. En este ejemplo aquí, podríamos simplemente agregar el controlador de eventos al elemento principal.
Muy bien, de nuevo, la delegación de eventos es no configurar el controlador de eventos en el elemento original que nos interesa, sino adjuntarlo a un elemento padre y, básicamente, capturar el evento allí porque brota. Entonces podemos actuar sobre el elemento que nos interesa usar la propiedad del elemento de destino.
Ejemplo:
Ahora supongamos que tenemos dos elementos de lista en nuestra página, después de agregar elementos en esas listas programáticamente, queremos eliminar uno o más elementos de ellos. Usando la técnica de delegación de eventos podemos lograr nuestro propósito fácilmente.
<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>
Agregar elementos en esa 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);
}
Eliminar ítems:
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);
}
