Để hiểu về ủy nhiệm sự kiện trước tiên chúng ta cần biết tại sao và khi nào chúng ta thực sự cần hoặc muốn ủy thác sự kiện.
Có thể có nhiều trường hợp nhưng chúng ta hãy thảo luận về hai trường hợp sử dụng lớn cho phái đoàn sự kiện. 1. Trường hợp đầu tiên là khi chúng ta có một phần tử có nhiều phần tử con mà chúng ta quan tâm. Trong trường hợp này, thay vì thêm một trình xử lý sự kiện cho tất cả các phần tử con này, chúng ta chỉ cần thêm nó vào phần tử cha và sau đó xác định trên đó yếu tố con sự kiện đã bị sa thải.
2. Trường hợp sử dụng thứ hai cho ủy nhiệm sự kiện là khi chúng tôi muốn một trình xử lý sự kiện được đính kèm với một phần tử chưa có trong DOM khi trang của chúng tôi được tải. Tất nhiên, đó là bởi vì chúng tôi không thể thêm một trình xử lý sự kiện vào một thứ không có trên trang của chúng tôi, vì vậy trong trường hợp không được chấp nhận rằng chúng tôi đang mã hóa.
Giả sử bạn có một danh sách 0, 10 hoặc 100 mục trong DOM khi bạn tải trang của mình và nhiều mục khác đang chờ trong tay bạn để thêm vào danh sách. Vì vậy, không có cách nào để đính kèm một trình xử lý sự kiện cho các phần tử trong tương lai hoặc các phần tử đó chưa được thêm vào DOM và cũng có thể có rất nhiều mục, vì vậy sẽ không hữu ích khi có một trình xử lý sự kiện được gắn vào mỗi phần tử của họ.
Đoàn sự kiện
Được rồi, vì vậy để nói về phái đoàn sự kiện, khái niệm đầu tiên mà chúng ta thực sự cần nói đến là sự kiện sôi nổi.
Bong bóng sự kiện: Bong bóng
sự kiện có nghĩa là khi một sự kiện được kích hoạt hoặc kích hoạt trên một số phần tử DOM, ví dụ bằng cách nhấp vào nút của chúng tôi ở đây trên hình ảnh dưới đây, thì sự kiện tương tự cũng được kích hoạt trên tất cả các thành phần chính.
Sự kiện này lần đầu tiên được kích hoạt trên nút, nhưng sau đó nó cũng sẽ được bắn vào tất cả các phần tử cha một lần, do đó, nó cũng sẽ bắn vào đoạn tới phần chính và thực sự đi lên trong cây DOM cho đến khi phần tử HTML là gốc. Vì vậy, chúng tôi nói rằng sự kiện này nổi lên bên trong cây DOM và đó là lý do tại sao nó được gọi là bong bóng.
Phần tử mục tiêu: Phần tử mà sự kiện được thực hiện lần đầu tiên được gọi là phần tử đích, do đó phần tử gây ra sự kiện xảy ra, được gọi là phần tử đích. Trong ví dụ trên của chúng tôi ở đây, dĩ nhiên, nút được nhấp. Phần quan trọng là phần tử đích này được lưu trữ như một thuộc tính trong đối tượng sự kiện, Điều này có nghĩa là tất cả các phần tử cha mà sự kiện cũng sẽ bắn sẽ biết phần tử đích của sự kiện, do đó sự kiện được bắn lần đầu tiên.
Điều đó đưa chúng ta đến với sự kiện bởi vì nếu sự kiện nổi lên trong cây DOM và nếu chúng ta biết sự kiện được bắn ở đâu thì chúng ta chỉ cần gắn một trình xử lý sự kiện vào một phần tử cha và chờ sự kiện nổi lên và chúng ta có thể sau đó làm bất cứ điều gì chúng tôi dự định làm với yếu tố mục tiêu của chúng tôi. Kỹ thuật này được gọi là đoàn sự kiện. Trong ví dụ này ở đây, chúng ta chỉ cần thêm trình xử lý sự kiện vào thành phần chính.
Được rồi, vì vậy, một lần nữa, phái đoàn sự kiện là không thiết lập trình xử lý sự kiện trên phần tử ban đầu mà chúng ta quan tâm mà gắn nó vào phần tử cha và, về cơ bản, bắt sự kiện ở đó vì nó nổi lên. Sau đó chúng ta có thể hành động dựa trên yếu tố mà chúng ta quan tâm khi sử dụng thuộc tính phần tử đích.
Ví dụ:
Bây giờ giả sử chúng tôi có hai mục danh sách trong trang của mình, sau khi thêm các mục trong danh sách đó theo chương trình, chúng tôi muốn xóa một hoặc nhiều mục khỏi chúng. Sử dụng tecnique ủy nhiệm sự kiện, chúng ta có thể đạt được mục đích của mình một cách dễ dàng.
<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>
Thêm các mục trong danh sách đó:
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);
}
Xóa mục:
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);
}
