JQuery Event Delegation cho người mới bắt đầu

Hi guys,

Nay chúng ta qua vấn đề vui vẻ, quay lại cái máng lợn JQuery nói chuyện nhé =))

Bài hôm nay sẽ về JQuery Event Delegation. Cùng nhau tìm hiểu thoy

1/ JQuery Event Delegation là gì?

Khi listen tới 1 browser event, ta hay dùng API của Jquery như sau:

// click
$("#btn-add").click(function() {
	// handler code here...
})

// change
$("input[name='hello']").on('change', function() {
	// handler code here...
})

Nó hoạt động tốt, fải không? Tuy nhiên, problem sẽ xảy ra khi chúng ta dynamically render lại content như sau:

// html code

<div id="my-container">
	<input type="text" name="hello" />

	<button id="btn-add">Add</button>
</div>

// js

<script>
	// ...
	// do something then
	// re-render #my-container but still render the button #btn-add & input
	$("#my-container").html(...)

</script>

Thì bây giờ button hay input đã hết listen rồi vì DOM này là DOM mới khởi tạo.

Để listen lại event, ta có 2 cách:

• Re-binding Events (.click, .change,…)
• Event Delegation

Hiểu đơn giản về Event Delegation, nó sẽ giúp chúng ta listen event từ DOM object cha (container – #my-container), từ cha sẽ listen xuống của mấy objects con. Từ đó ta sẽ đỡ fải binding lại event cũng như làm việc với dynamic content hiệu quả hơn.

Thời buổi giờ,  AJAX => Render => Ajax => Render là việc thường ngày. Nên việc tiếp cận dc Event Delegation sẽ giúp bạn giải quyết bài toán này

2/ Sử dụng JQuery Event Delegate cơ bản

Thông qua API on của JQuery, Usage như sau:

$("your-selector-of-container").on('eventType', 'children-selector', handlerMethod)

Và từ ví dụ trên, ta sẽ define như sau:

$("#my-container").on('change', 'input[name=hello]', function() {
	// handler code here
})

$("#my-container").on('click', '#btn-add', function() {
	// handler code here
})

Từ đó, mỗi lần content của #my-container bị thay đổi, nhưng #btn-add và input[name='hello'] vẫn còn thì vẫn event listener vẫn chạy như bình thường 😀

Nó sẽ giúp ta giải quyết bài toán dynamic content, ví dụ cases hay gặp như:

• Dynamic Form Fields
• DataTable, click vào row/button trong column để hiện hay trigger action gì gì đó đó
  • Đa phần mình có button View/Update/Delete => thực thi action
• …

3/ Conclusion

Cơ bản là thế các bạn à. Giờ thời buổi 2021, ta hay sử dụng các framework như Vue, React, Angular. Mọi thứ đã dc framework nó lo cho hết nên ko phải bận tâm gì nhiều.

Nhưng khi mình biết được cơ chế hoạt động thì vẫn tốt hơn hehe. Ko phải lúc nào cũng xài Framework, và cũng ko fải lúc nào cũng chỉ JS + Jquery thuần.

Happy web coding!!