Trong lúc dịch tài liệu dự án, mình bắt gặp 1 yêu cầu nhỏ. Cụ thể là ở màn hình create (tạo mới) cần tạo ra một danh sách input động, các row trong table có thể tăng giảm dựa vào button hoặc . Thực tế, đây là bài toán khá quen thuộc và dễ dàng thực hiện với các framework hỗ trợ data-binding như React, Angular hay VueJs. Tuy nhiên do đặc thù là maintaince một tool khá cũ của khách nên cũng không muốn add thêm mấy cái đao to búa lớn quá. 
Bài toán này có thể sử dụng hoàn toàn Javascript thao tác trên HTML Dom. Tuy nhiên để hạn chế tối đa rủi ro khi làm dự án, mình quyết định sử dụng thư viện: List.js
Với bài tập nhỏ này mình giao lại cho 1 member mới vào team để intern, yêu cầu cuối ngày phải xong việc. Để không bị phàn nàn là Talk is cheap thì mình cũng thử code luôn 
.
See the Pen Table List by Nguyễn Văn Vượng (@euclid1990) on CodePen.
DONE 
Thực sự công việc này ko khó, tuy nhiên ở code Javascript có function:
refreshCallbacks();
được gọi lại khá nhiều, làm mình nhớ tới khái niệm Event Delegation trong jQuery.
Event delegation cho phép developer gắn một single event listener vào parent element (phần tử cha), sẽ áp dụng cho tất cả các descendant elements (phần tử con), cho dù các descendants đó có tồn tại hay không, hoặc được thêm vào trong tương lai.
Việc sử dụng Event delegation cho phép chúng ta không cần gọi lại nhiều lần 1 function (Ví dụ: refreshCallbacks) để bind event cho các element HTML được thêm vào trong tương lai. Bạn cũng có thể áp dụng nó vào đây ngay và luôn 
Để hiểu rõ hơn về Event delegation cũng như cơ chế Event Propagation, các bạn có thể đọc thêm tại Understanding Event Delegation