Pour comprendre la délégation d'événements, nous devons d'abord savoir pourquoi et quand nous avons réellement besoin ou voulons une délégation d'événements.
Il peut y avoir de nombreux cas, mais discutons de deux grands cas d'utilisation pour la délégation d'événements. 1. Le premier cas est lorsque nous avons un élément avec beaucoup d'éléments enfants qui nous intéresse. Dans ce cas, au lieu d'ajouter un gestionnaire d'événements à tous ces éléments enfants, nous l'ajoutons simplement à l'élément parent, puis déterminons sur quel élément enfant l'événement a été déclenché.
2.Le deuxième cas d'utilisation pour la délégation d'événements est lorsque nous voulons qu'un gestionnaire d'événements soit attaché à un élément qui n'est pas encore dans le DOM lorsque notre page est chargée. C'est, bien sûr, parce que nous ne pouvons pas ajouter un gestionnaire d'événements à quelque chose qui n'est pas sur notre page, donc dans un cas de dépréciation que nous codons.
Supposons que vous ayez une liste de 0, 10 ou 100 éléments dans le DOM lorsque vous chargez votre page et que d'autres éléments attendent dans votre main pour être ajoutés à la liste. Il n'y a donc aucun moyen d'attacher un gestionnaire d'événements pour les futurs éléments ou ces éléments ne sont pas encore ajoutés dans le DOM, et il peut également y avoir beaucoup d'éléments, il ne serait donc pas utile d'avoir un gestionnaire d'événements attaché à chacun d'eux.
Délégation d'événement
Très bien, donc pour parler de délégation d'événement, le premier concept dont nous devons réellement parler est le bouillonnement d'événement.
Bulle d'événement: la bulle d'
événement signifie que lorsqu'un événement est déclenché ou déclenché sur un élément DOM, par exemple en cliquant sur notre bouton ici sur l'image ci-dessous, le même événement exact est également déclenché sur tous les éléments parents.
L'événement est d'abord déclenché sur le bouton, mais il sera également déclenché sur tous les éléments parents un par un, il déclenchera également le paragraphe dans la section l'élément principal et en fait tout le chemin dans une arborescence DOM jusqu'à l'élément HTML qui est la racine. Nous disons donc que l'événement bouillonne à l'intérieur de l'arborescence DOM, et c'est pourquoi il est appelé bouillonnement.
Élément cible: l'élément sur lequel l'événement a été déclenché pour la première fois, appelé l'élément cible, de sorte que l'élément qui a provoqué l'événement, est appelé l'élément cible. Dans notre exemple ci-dessus, c'est bien sûr le bouton sur lequel vous avez cliqué. La partie importante est que cet élément cible est stocké en tant que propriété dans l'objet événement, cela signifie que tous les éléments parents sur lesquels l'événement se déclenchera également connaîtront l'élément cible de l'événement, donc où l'événement a été déclenché pour la première fois.
Cela nous amène à la délégation d'événements parce que si l'événement bouillonne dans l'arborescence DOM, et si nous savons où l'événement a été déclenché, nous pouvons simplement attacher un gestionnaire d'événements à un élément parent et attendre que l'événement se propage, et nous pouvons puis faites tout ce que nous voulions faire avec notre élément cible. Cette technique est appelée délégation d'événements. Dans cet exemple, nous pourrions simplement ajouter le gestionnaire d'événements à l'élément principal.
Très bien, encore une fois, la délégation d'événements ne consiste pas à configurer le gestionnaire d'événements sur l'élément d'origine qui nous intéresse, mais à le rattacher à un élément parent et, fondamentalement, à y attraper l'événement car il bouillonne. Nous pouvons ensuite agir sur l'élément qui nous intéresse en utilisant la propriété d'élément cible.
Exemple:
Supposons maintenant que nous avons deux éléments de liste dans notre page, après avoir ajouté des éléments dans cette liste par programme, nous voulons en supprimer un ou plusieurs. En utilisant la technique de délégation d'événements, nous pouvons atteindre notre objectif facilement.
<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>
Ajout d'éléments dans cette 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);
}
Supprimer des éléments:
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);
}
