เพื่อให้เข้าใจถึงการมอบหมายเหตุการณ์ก่อนอื่นเราต้องรู้ว่าทำไมและเมื่อใดที่เราต้องการหรือต้องการการมอบหมายกิจกรรม
อาจมีหลายกรณี แต่ให้หารือเกี่ยวกับกรณีใช้งานใหญ่สองกรณีสำหรับการมอบหมายเหตุการณ์ 1. กรณีแรกคือเมื่อเรามีองค์ประกอบที่มีองค์ประกอบย่อย ๆ มากมายที่เราสนใจในกรณีนี้แทนที่จะเพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบย่อยทั้งหมดเราเพียงแค่เพิ่มองค์ประกอบหลักแล้วกำหนด องค์ประกอบลูกเหตุการณ์ถูกไล่ออก
2. กรณีการใช้งานที่สองสำหรับการมอบหมายเหตุการณ์คือเมื่อเราต้องการให้ตัวจัดการเหตุการณ์แนบกับองค์ประกอบที่ยังไม่ได้อยู่ใน DOM เมื่อโหลดหน้าเว็บของเรา แน่นอนว่าเพราะเราไม่สามารถเพิ่มตัวจัดการเหตุการณ์ให้กับสิ่งที่ไม่ได้อยู่ในหน้าของเราดังนั้นในกรณีที่เราไม่ได้เข้ารหัส
สมมติว่าคุณมีรายการ 0, 10 หรือ 100 รายการใน DOM เมื่อคุณโหลดหน้าของคุณและมีอีกหลายรายการที่รออยู่ในมือของคุณเพื่อเพิ่มในรายการ ดังนั้นจึงไม่มีวิธีแนบตัวจัดการเหตุการณ์สำหรับองค์ประกอบในอนาคตหรือองค์ประกอบเหล่านั้นยังไม่ได้เพิ่มใน DOM และยังอาจมีรายการจำนวนมากดังนั้นจึงไม่มีประโยชน์ที่จะมีตัวจัดการเหตุการณ์หนึ่งตัวแนบอยู่กับแต่ละรายการ ของพวกเขา.
การมอบหมายกิจกรรม
เอาล่ะดังนั้นเพื่อที่จะพูดคุยเกี่ยวกับการมอบหมายเหตุการณ์แนวคิดแรกที่เราต้องพูดถึงคือการจัดอีเวนท์
การทำ bubbling ของเหตุการณ์: bubbling ของ
เหตุการณ์หมายความว่าเมื่อมีเหตุการณ์ถูกเรียกใช้หรือถูกเรียกใช้ในองค์ประกอบ 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);
}
