Щоб зрозуміти делегацію подій, спершу ми повинні знати, чому і коли насправді потрібна або хочемо делегація подій.
Випадків може бути багато, але давайте обговоримо два великі випадки використання для делегування подій. 1. Перший випадок, коли у нас є елемент з великою кількістю дочірніх елементів, які нас цікавлять. У цьому випадку, замість того, щоб додати обробник подій до всіх цих дочірніх елементів, ми просто додаємо його до батьківського елемента, а потім визначаємо на якому дочірньому елементі подію розгорнули.
2. Другий випадок використання делегування подій - це коли ми хочемо, щоб обробник подій був приєднаний до елемента, якого ще немає в DOM, коли наша сторінка завантажується. Це, звичайно, тому що ми не можемо додати обробник подій до чогось, що не є на нашій сторінці, так що у випадку знецінення, яке ми кодуємо.
Припустимо, у вас є список 0, 10 або 100 елементів у DOM, коли ви завантажуєте свою сторінку, а в руці чекає більше елементів, щоб додати їх у список. Таким чином, немає можливості приєднати обробник подій до майбутніх елементів або ці елементи ще не додані в DOM, а також може бути багато елементів, тому не було б корисно мати один обробник подій, приєднаний до кожного їх.
Делегація подій
Гаразд, тому для того, щоб поговорити про делегування подій, першою концепцією, про яку ми насправді потрібно поговорити, є кипуча подій.
Пузир події: Бублинг
подій означає, що коли подія запускається або спрацьовує на якомусь елементі DOM, наприклад, натиснувши на нашу кнопку тут на нижньому зображенні, то точно та сама подія також запускається на всіх батьківських елементах.
Подія спочатку запускається на кнопку, але потім вона також буде запускатися по всіх батьківських елементах один за одним, тому вона також запустить на абзац до розділу головний елемент і фактично весь шлях у дерево DOM до елемента HTML, що є коренем. Тому ми кажемо, що подія пухиряється всередині дерева DOM, і тому це називається барботажем.
Цільовий елемент: Елемент, на якому насправді подія була запущена, називається цільовим елементом, тому елемент, який спричинив подію, називається цільовим елементом. У нашому наведеному вище прикладі це, звичайно, кнопка, яку натиснули. Важлива частина полягає в тому, що цей цільовий елемент зберігається як властивість в об'єкті події. Це означає, що всі батьківські елементи, на яких також буде запускатися подія, будуть знати цільовий елемент події, тому там, де подія була вперше запущена.
Це приводить нас до делегації подій, тому що якщо подія пухиряється в дереві DOM, і якщо ми знаємо, де подію було зафіксовано, ми можемо просто приєднати обробник події до батьківського елемента і чекати, коли подія спливає, і ми можемо тоді робимо все, що ми мали намір зробити з нашим цільовим елементом. Ця методика називається делегуванням подій. У цьому прикладі тут ми можемо просто додати обробник подій до основного елемента.
Гаразд, тому знову ж таки, делегування подій - це не встановлювати обробник подій на оригінальний елемент, який нас цікавить, але прикріплювати його до батьківського елемента і, в основному, фіксувати подію там, оскільки вона пухиряє. Потім ми можемо діяти на елементі, який нам зацікавлений у використанні властивості цільового елемента.
Приклад:
Тепер припустимо, що у нас є два елементи списку на нашій сторінці, після додавання елементів до цього списку програмно ми хочемо видалити з них один або кілька елементів. Використовуючи техніку делегування подій, ми можемо легко досягти своєї цілі.
<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);
}
