Untuk memahami delegasi acara terlebih dahulu, kita perlu tahu mengapa dan kapan kita benar-benar membutuhkan atau menginginkan delegasi acara.
Mungkin ada banyak kasus tetapi mari kita bahas dua kasus penggunaan besar untuk delegasi acara. 1. Kasus pertama adalah ketika kita memiliki elemen dengan banyak elemen anak yang kita minati. Dalam kasus ini, alih-alih menambahkan event handler ke semua elemen anak ini, kita cukup menambahkannya ke elemen induk dan kemudian menentukan di mana elemen anak acara dipecat.
2.Kasus penggunaan kedua untuk delegasi acara adalah ketika kami ingin pengendali acara dilampirkan ke elemen yang belum ada di DOM saat halaman kami dimuat. Itu, tentu saja, karena kita tidak bisa menambahkan event handler ke sesuatu yang tidak ada di halaman kita, jadi dalam kasus penghinaan yang kita koding.
Misalkan Anda memiliki daftar 0, 10, atau 100 item di DOM ketika Anda memuat halaman Anda, dan lebih banyak item menunggu di tangan Anda untuk ditambahkan dalam daftar. Jadi tidak ada cara untuk melampirkan event handler untuk elemen-elemen di masa depan atau elemen-elemen tersebut belum ditambahkan di DOM, dan juga mungkin ada banyak item, jadi tidak akan berguna untuk memiliki satu event handler yang melekat pada masing-masing dari mereka.
Delegasi Acara
Baiklah, jadi untuk membicarakan tentang pendelegasian acara, konsep pertama yang sebenarnya perlu kita bicarakan adalah penggelembungan acara.
Gelembung peristiwa: Gelembung
peristiwa berarti bahwa ketika suatu peristiwa dipecat atau dipicu pada beberapa elemen DOM, misalnya dengan mengklik tombol kami di sini pada gambar di bawah, maka peristiwa yang sama persis juga dipicu pada semua elemen induk.
Acara pertama kali diaktifkan pada tombol, tetapi kemudian juga akan ditembaki pada semua elemen induk satu per satu, sehingga juga akan menembak paragraf ke bagian elemen utama dan benar-benar sepanjang jalan di pohon DOM hingga elemen HTML yang merupakan root. Jadi kita katakan bahwa peristiwa itu meletus di dalam pohon DOM, dan itulah sebabnya itu disebut menggelegak.
Elemen target: Elemen di mana peristiwa itu pertama kali dipecat disebut elemen target, sehingga elemen yang menyebabkan peristiwa itu terjadi, disebut elemen target. Dalam contoh kami di atas di sini, tentu saja, tombol yang diklik. Bagian yang penting adalah bahwa elemen target ini disimpan sebagai properti di objek acara, Ini berarti bahwa semua elemen induk di mana acara juga akan menembak akan tahu elemen target acara, jadi di mana acara itu pertama kali dipecat.
Itu membawa kita ke delegasi acara karena jika acara muncul di pohon DOM, dan jika kita tahu di mana acara itu dipecat maka kita dapat dengan mudah melampirkan pengendali acara ke elemen induk dan menunggu acara tersebut muncul, dan kita dapat kemudian lakukan apa pun yang kami maksudkan dengan elemen target kami. Teknik ini disebut delegasi acara. Dalam contoh ini di sini, kita bisa menambahkan event handler ke elemen utama.
Baiklah, jadi sekali lagi, delegasi acara adalah untuk tidak mengatur event handler pada elemen asli yang kami minati tetapi untuk melampirkannya ke elemen induk dan, pada dasarnya, menangkap acara di sana karena itu menggelembung. Kami kemudian dapat bertindak pada elemen yang kami tertarik menggunakan properti elemen target.
Contoh:
Sekarang mari kita asumsikan kita memiliki dua item daftar di halaman kita, setelah menambahkan item dalam daftar itu secara terprogram kita ingin menghapus satu atau lebih item dari mereka. Dengan menggunakan teknik delegasi acara, kita dapat mencapai tujuan dengan mudah.
<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>
Menambahkan item dalam daftar itu:
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);
}
Hapus item:
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);
}
