Aby najpierw zrozumieć delegację wydarzeń, musimy wiedzieć, dlaczego i kiedy faktycznie potrzebujemy lub chcemy delegacji wydarzeń.
Może być wiele przypadków, ale omówmy dwa duże przypadki użycia do delegowania zdarzeń. 1. Pierwszy przypadek ma miejsce, gdy mamy element z dużą ilością elementów potomnych, którymi jesteśmy zainteresowani. W tym przypadku zamiast dodawać moduł obsługi zdarzeń do wszystkich tych elementów potomnych, po prostu dodajemy go do elementu nadrzędnego, a następnie określamy na który element potomny uruchomiono zdarzenie.
2. Drugi przypadek użycia dla delegowania zdarzeń ma miejsce, gdy chcemy, aby procedura obsługi zdarzeń była dołączona do elementu, który nie jest jeszcze w DOM, gdy nasza strona jest ładowana. To oczywiście dlatego, że nie możemy dodać modułu obsługi zdarzeń do czegoś, co nie znajduje się na naszej stronie, więc w przypadku zaniechania, które kodujemy.
Załóżmy, że masz listę 0, 10 lub 100 elementów w DOM podczas wczytywania strony, a więcej elementów czeka na Ciebie, aby dodać je na liście. Nie ma więc sposobu na dołączenie modułu obsługi zdarzeń dla przyszłych elementów lub te elementy nie zostały jeszcze dodane do DOM, a także może być wiele elementów, więc nie byłoby przydatne, aby do każdego z nich był dołączony jeden moduł obsługi zdarzeń z nich.
Delegacja wydarzeń
W porządku, więc aby porozmawiać o delegowaniu wydarzeń, pierwszą koncepcją, o której naprawdę musimy porozmawiać, jest propagacja wydarzeń.
Bubbing zdarzeń: Bubbing
zdarzeń oznacza, że gdy zdarzenie jest uruchamiane lub wyzwalane na jakimś elemencie DOM, na przykład poprzez kliknięcie naszego przycisku na poniższym obrazie, wówczas to samo zdarzenie jest wywoływane również na wszystkich elementach nadrzędnych.
Zdarzenie jest najpierw uruchamiane na przycisku, ale następnie będzie również uruchamiane na wszystkich elementach nadrzędnych pojedynczo, więc będzie również odpalane w akapicie do sekcji głównego elementu i faktycznie aż do góry w drzewie DOM aż do elementu HTML, który jest rootem. Mówimy więc, że wydarzenie pęka w drzewie DOM i dlatego nazywa się to bulgotaniem.
Element docelowy: Element, w którym zdarzenie zostało po raz pierwszy uruchomione, nazywał się elementem docelowym, więc element, który spowodował zdarzenie, nazywany jest elementem docelowym. W naszym powyższym przykładzie jest to oczywiście przycisk, który został kliknięty. Ważną częścią jest to, że ten element docelowy jest przechowywany jako właściwość w obiekcie zdarzenia. Oznacza to, że wszystkie elementy nadrzędne, na których również zostanie uruchomione zdarzenie, będą znać element docelowy zdarzenia, a więc miejsce, w którym zdarzenie zostało po raz pierwszy uruchomione.
To prowadzi nas do delegowania zdarzeń, ponieważ jeśli wydarzenie pęka w drzewie DOM, a jeśli wiemy, gdzie zostało ono uruchomione, możemy po prostu dołączyć moduł obsługi zdarzenia do elementu nadrzędnego i poczekać, aż zdarzenie się pojawi. następnie zrób wszystko, co zamierzaliśmy zrobić z naszym elementem docelowym. Ta technika nazywa się delegowaniem wydarzeń. W tym przykładzie moglibyśmy po prostu dodać moduł obsługi zdarzeń do głównego elementu.
W porządku, więc ponownie delegowanie zdarzeń nie polega na ustawianiu procedury obsługi zdarzenia na oryginalnym elemencie, który nas interesuje, ale na dołączeniu go do elementu nadrzędnego i, w zasadzie, przechwyceniu zdarzenia, ponieważ pęka. Następnie możemy działać na elemencie, który jest zainteresowany wykorzystaniem właściwości elementu docelowego.
Przykład:
Załóżmy teraz, że mamy dwa elementy listy na naszej stronie, po programowym dodaniu elementów z tych list chcemy usunąć jeden lub więcej elementów z nich. Korzystając z techniki delegowania wydarzeń, możemy łatwo osiągnąć nasz cel.
<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>
Dodawanie elementów na tych listach:
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);
}
Usuń elementy:
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);
}
