イベントの委任を理解するには、最初にイベントの委任が実際に必要または必要な理由と時期を知る必要があります。
多くの場合がありますが、イベント委任の2つの大きな使用例について説明します。1.最初のケースは、関心のある多数の子要素を持つ要素がある場合です。この場合、これらのすべての子要素にイベントハンドラーを追加する代わりに、単純に親要素に追加してから決定します。イベントが発生した子要素。
2.イベント委譲の2番目の使用例は、ページの読み込み時に、まだDOMにない要素にイベントハンドラーをアタッチする場合です。もちろん、これは、ページ上にないものにイベントハンドラーを追加できないためです。非推奨の場合は、コーディングを行っています。
ページを読み込むときにDOMに0、10、または100のアイテムのリストがあり、リストに追加するためにさらに多くのアイテムが手元にあると想定します。したがって、future要素のイベントハンドラーをアタッチする方法がないか、それらの要素がDOMにまだ追加されていません。また、アイテムが多数ある可能性があるため、それぞれに1つのイベントハンドラーをアタッチすることは役に立ちません。そのうちの。
イベントの委任
よし、イベントの委任について話すために、私たちが実際に話す必要がある最初の概念は、イベントバブリングです。
イベントバブリング：
イベントバブリングとは、あるDOM要素でイベントが発生またはトリガーされたとき（たとえば、下の画像のボタンをクリックすると）、すべての親要素でまったく同じイベントがトリガーされることを意味します。
イベントは最初にボタンで発生しますが、すべての親要素でも一度に1つ発生するため、段落でメイン要素のセクションに、そして実際にはDOMツリー全体で発生します。ルートであるHTML要素まで。そのため、イベントはDOMツリー内でバブルアップします。それが、バブリングと呼ばれる理由です。
ターゲット要素：イベントが実際に最初に発生した要素はターゲット要素と呼ばれるため、イベントを発生させた要素はターゲット要素と呼ばれます。上記の例では、もちろん、クリックされたボタンです。重要な部分は、このターゲット要素がイベントオブジェクトのプロパティとして格納されていることです。これは、イベントが発生するすべての親要素がイベントのターゲット要素を知っているため、イベントが最初に発生した場所です。
これにより、イベントが委任されます。イベントがDOMツリー内でバブルアップし、イベントが発生した場所がわかっている場合は、イベントハンドラーを親要素にアタッチして、イベントがバブルアップするのを待つだけです。次に、ターゲット要素に対して意図したことをすべて実行します。この手法はイベント委任と呼ばれます。この例では、イベントハンドラーをメイン要素に追加するだけです。
さて、イベントの委任とは、関心のある元の要素にイベントハンドラーを設定するのではなく、親要素にアタッチして、基本的にはイベントが発生するのでそこにイベントをキャッチすることです。次に、ターゲット要素のプロパティを使用して、関心のある要素を操作できます。
例：
ページに2つのリストアイテムがあると仮定します。リストにアイテムをプログラムで追加した後、それらから1つ以上のアイテムを削除します。イベント委任技術を使用すると、目的を簡単に達成できます。
<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);
}
