Um die Ereignisdelegierung zuerst zu verstehen, müssen wir wissen, warum und wann wir die Ereignisdelegierung tatsächlich benötigen oder wollen.
Es mag viele Fälle geben, aber lassen Sie uns zwei große Anwendungsfälle für die Ereignisdelegation diskutieren. 1. Der erste Fall ist, wenn wir ein Element mit vielen untergeordneten Elementen haben, an denen wir interessiert sind. In diesem Fall fügen wir, anstatt allen diesen untergeordneten Elementen einen Ereignishandler hinzuzufügen, ihn einfach dem übergeordneten Element hinzu und bestimmen dann Auf welches untergeordnete Element wurde das Ereignis ausgelöst?
2. Der zweite Anwendungsfall für die Ereignisdelegierung besteht darin, dass ein Ereignishandler an ein Element angehängt werden soll, das sich beim Laden unserer Seite noch nicht im DOM befindet. Das liegt natürlich daran, dass wir einem Ereignishandler, der nicht auf unserer Seite ist, keinen Ereignishandler hinzufügen können, also im Falle eines Verfalls, den wir codieren.
Angenommen, Sie haben eine Liste mit 0, 10 oder 100 Elementen im DOM, wenn Sie Ihre Seite laden, und weitere Elemente warten in Ihrer Hand darauf, in die Liste aufgenommen zu werden. Es gibt also keine Möglichkeit, einen Ereignishandler für zukünftige Elemente anzuhängen, oder diese Elemente werden noch nicht im DOM hinzugefügt, und es können auch viele Elemente vorhanden sein. Daher wäre es nicht sinnvoll, jeweils einen Ereignishandler anzuhängen von ihnen.
Ereignisdelegation
Also gut, um über Eventdelegation zu sprechen, ist das erste Konzept, über das wir tatsächlich sprechen müssen, das Sprudeln von Events.
Ereignisblasen:
Ereignisblasen bedeutet, dass, wenn ein Ereignis für ein DOM-Element ausgelöst oder ausgelöst wird, beispielsweise durch Klicken auf unsere Schaltfläche hier im folgenden Bild, genau dasselbe Ereignis auch für alle übergeordneten Elemente ausgelöst wird.
Das Ereignis wird zuerst auf die Schaltfläche ausgelöst, dann aber auch nacheinander auf alle übergeordneten Elemente, sodass es auch auf den Absatz des Abschnitts des Hauptelements und tatsächlich ganz oben in einem DOM-Baum ausgelöst wird bis zum HTML-Element, das die Wurzel ist. Wir sagen also, dass das Ereignis im DOM-Baum in die Luft sprudelt, und deshalb wird es als Sprudeln bezeichnet.
Zielelement: Das Element, auf das das Ereignis tatsächlich zum ersten Mal ausgelöst wurde, wird als Zielelement bezeichnet. Das Element, das das Ereignis verursacht hat, wird als Zielelement bezeichnet. In unserem obigen Beispiel hier ist es natürlich die Schaltfläche, auf die geklickt wurde. Der wichtige Teil ist, dass dieses Zielelement als Eigenschaft im Ereignisobjekt gespeichert wird. Dies bedeutet, dass alle übergeordneten Elemente, auf die das Ereignis auch ausgelöst wird, das Zielelement des Ereignisses kennen, also wo das Ereignis zuerst ausgelöst wurde.
Das bringt uns zur Ereignisdelegierung, denn wenn das Ereignis im DOM-Baum sprudelt und wir wissen, wo das Ereignis ausgelöst wurde, können wir einfach einen Ereignishandler an ein übergeordnetes Element anhängen und warten, bis das Ereignis sprudelt, und wir können Machen Sie dann alles, was wir mit unserem Zielelement vorhaben. Diese Technik wird als Ereignisdelegation bezeichnet. In diesem Beispiel hier könnten wir einfach den Ereignishandler zum Hauptelement hinzufügen.
Also gut, die Ereignisdelegation besteht darin, den Ereignishandler nicht für das ursprüngliche Element einzurichten, an dem wir interessiert sind, sondern ihn an ein übergeordnetes Element anzuhängen und das Ereignis dort im Grunde zu erfassen, weil es sprudelt. Wir können dann auf das Element einwirken, an dem wir interessiert sind, indem wir die Zielelement-Eigenschaft verwenden.
Beispiel:
Nehmen wir nun an, wir haben zwei Listenelemente auf unserer Seite. Nachdem wir Elemente in dieser Liste programmgesteuert hinzugefügt haben, möchten wir ein oder mehrere Elemente aus ihnen löschen. Mit der Technik der Ereignisdelegation können wir unseren Zweck leicht erreichen.
<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>
Hinzufügen von Elementen zu dieser Liste:
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);
}
Elemente löschen:
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);
}
