이벤트 위임을 이해하려면 먼저 이벤트 위임이 필요한 이유와시기를 알아야합니다.
많은 경우가있을 수 있지만 이벤트 위임에 대한 두 가지 큰 사용 사례에 대해 논의 해 봅시다. 1. 첫 번째 경우는 관심있는 하위 요소가 많은 요소가있는 경우입니다.이 경우 모든 하위 요소에 이벤트 핸들러를 추가하는 대신 단순히 상위 요소에 추가 한 다음 결정합니다. 어떤 하위 요소에서 이벤트가 시작되었는지
2. 이벤트 위임의 두 번째 사용 사례는 페이지가로드 될 때 아직 DOM에없는 요소에 이벤트 핸들러를 첨부하려는 경우입니다. 물론 페이지에없는 것에 이벤트 핸들러를 추가 할 수 없기 때문에 더 이상 사용하지 않을 경우 코딩하고 있습니다.
페이지를로드 할 때 DOM에 0, 10 또는 100 개의 항목 목록이 있고 더 많은 항목이 목록에 추가되기를 기다리고 있다고 가정합니다. 따라서 미래 요소에 대한 이벤트 핸들러를 첨부 할 수있는 방법이 없거나 해당 요소가 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);
}
