Чтобы сначала понять делегирование событий, нам нужно знать, почему и когда нам действительно нужно или нужно делегировать события.
Может быть много случаев, но давайте обсудим два больших варианта использования для делегирования события. 1. Первый случай, когда у нас есть элемент с большим количеством интересующих нас дочерних элементов. В этом случае вместо добавления обработчика событий ко всем этим дочерним элементам мы просто добавляем его в родительский элемент и затем определяем на каком дочернем элементе произошло событие.
2. Второй вариант использования для делегирования событий - это когда мы хотим, чтобы обработчик событий был присоединен к элементу, которого еще нет в DOM, когда наша страница загружена. Это, конечно, потому что мы не можем добавить обработчик событий к тому, чего нет на нашей странице, поэтому в случае устаревания, которое мы кодируем.
Предположим, у вас есть список из 0, 10 или 100 элементов в DOM, когда вы загружаете свою страницу, и еще больше элементов ждут, чтобы добавить их в список. Таким образом, нет никакого способа прикрепить обработчик событий для будущих элементов, или эти элементы еще не добавлены в DOM, а также может быть много элементов, поэтому было бы бесполезно иметь один обработчик событий, прикрепленный к каждому. из них.
Делегация мероприятия
Итак, для того, чтобы говорить о делегировании событий, первая концепция, о которой нам действительно нужно поговорить, это пузырьки событий.
Пузырьки событий: Пузырьки
событий означают, что когда событие запускается или запускается на каком-либо элементе DOM, например, нажав нашу кнопку здесь на изображении ниже, то точно такое же событие также запускается на всех родительских элементах.
Событие сначала вызывается для кнопки, но затем оно также запускается для всех родительских элементов по одному, поэтому оно также запускает абзац до раздела основного элемента и фактически весь путь вверх в дереве DOM. пока элемент HTML, который является корнем. Итак, мы говорим, что событие всплывает внутри дерева DOM, и именно поэтому оно называется пузырьковым.
Целевой элемент: элемент, для которого событие было фактически запущено, называется целевым элементом, поэтому элемент, вызвавший событие, называется целевым элементом. В нашем примере выше, это, конечно, кнопка, на которую нажали. Важной частью является то, что этот целевой элемент хранится в виде свойства в объекте события. Это означает, что все родительские элементы, для которых также будет инициировано событие, будут знать целевой элемент события, то есть, где событие было запущено впервые.
Это приводит нас к делегированию события, потому что, если событие всплывает в дереве DOM, и если мы знаем, где событие было запущено, то мы можем просто прикрепить обработчик события к родительскому элементу и ждать, пока событие не всплывет, и мы можем затем сделайте все, что мы собирались сделать с нашим целевым элементом. Эта техника называется делегированием событий. В этом примере мы могли бы просто добавить обработчик событий в основной элемент.
Итак, опять же, делегирование событий состоит не в том, чтобы устанавливать обработчик событий в интересующем нас исходном элементе, а в том, чтобы присоединять его к родительскому элементу и, по сути, перехватывать событие там, потому что оно всплывает. Затем мы можем воздействовать на интересующий нас элемент, используя свойство target element.
Пример:
теперь давайте предположим, что у нас есть два элемента списка на нашей странице, после программного добавления элементов в этот список мы хотим удалить из них один или несколько элементов. Используя технику делегирования событий, мы можем легко достичь нашей цели.
<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>
Добавление элементов в этот список:
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);
}
Удалить элементы:
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);
}
