Bài viết này chia sẻ cách bind event cho những element chưa tồn tại (hay được sinh ra sau đó) bằng khái niệm Event Delegation.
Trong jQuery, mỗi đối tượng đều có một số lượng event nhất định, và đây là cách mà ta vẫn thường dùng để bind event:
[code language=”javascript”] $(“.btn”).click(function() {} // Do something here… }); $(“#myDropdown”).change(function() {} // Do something here… }); [/code]
Với cách làm này, jQuery sẽ bind các event này vào các element trong selector (trong ví dụ này là các element có class btn và id myDropdown). Tuy nhiên, 1 chút rắc rối sẽ xảy ra khi…
Ví dụ 1: Button thứ 2 “Second Button” được thêm vào sau. Khi click vào “Second Button”, không có gì xảy ra hết dù nó có cùng class “btn” với “First Button” (Event click được bind cho class btn).
HTML:
[code language=”html”] [/code]
JavaScript:
[code language=”javascript”] // Clicking on a button (with class “btn”) will alert it’s text $(“.btn”).click(function() { alert($(this).html()); }); $(“body”).append(““); [/code]
Why Why Why???
Nguyên nhân to bự: Vào thời điểm event được bind, chỉ những element nào ứng với selector mới “nhận được” event đó. Còn những element được sinh ra khi đã “quá mùa” binding đương nhiên…nhịn.
Tóm lại là: chỉ những element đang tồn tại ở thời điểm event được bind mới nhận được event đó. Các element được thêm vào sau thì không.
Làm sao bây giờ?
Trong jQuery có 1 method là .on() có khả năng bind mọi event của mọi element; cách dùng cũng đơn giản, khá giống ví dụ ban nãy:
Syntax:
[code language=”javascript”] $(selector).on(eventName, function); [/code]
Ví dụ:
[code language=”javascript”] $(“.btn”).on(“click”, function() {} // Do something here… }); $(“#myDropdown”).on(“change”, function() {} // Do something here… }); [/code]
Method .on() có nhiều công dụng như:
- Default, y chang ví dụ 1. Thực ra .click() là cách dùng rút gọn của .on(“click”)
- Bind nhiều event vào cùng 1 event handler
- Bind nhiều event và nhiều handlers vào 1 selectors
- Bind event từ method .trigger()
- V.v…
Tuy nhiên trong bài này, ta chỉ cần tìm hiểu 1 chức năng của .on() cho phép bind event cho những element chưa tồn tại, gọi là Event Delegation.
Vậy, Event Delegation là gì?
Event Delegation cho phép bind event vào 1 element cha. Event này sẽ được kích hoạt cho các element “con cháu” ứng với selector, bất chấp đống “con cháu” đó hiện đang tồn tại hay sẽ được thêm vào sau.
Syntax:
[code language=”javascript”] $(parentSelector).on(eventName, descendantSelector, function); [/code]
Ví dụ 2: Button thứ 2 “Second Button” được thêm vào sau nhưng vẫn được bind event “click”.
JavaScript:
[code language=”javascript”] // Clicking on a button (with class “btn”) will alert it’s text $(“body”).on(“click”, “.btn”, function() { alert($(this).html()); }); [/code]
Ở đây, parentSelector làm nhiệm vụ “hứng” dùm event, khi “con cháu” của nó được kích hoạt ứng với event đó, event sẽ được khởi chạy.
Một vài lưu ý khi sử dụng Event Delegation
- Hạn chế sử dụng các parent selector “to bự” như document, body, html.
Scope quá lớn sẽ khiến bạn gặp nhiều phiền phức khi có quá nhiều event giống nhau được bind vào document hay body. Hãy sử dụng 1 parent selector “to vừa đủ”.
[code language=”html”]
[/code] [code language=”javascript”] $(“#myContainer”).on(“click”, “.btn”, function() {}); [/code]
- Parent selector phải là cố định từ đầu nhé, chứ nó mà cũng sinh sau đẻ muộn thì còn “hứng” dùm ai được nữa =.=’
- Selector thứ 2 trong method này được dùng từ “descendants”, NOT “children”, tức là cả con cái lẫn cháu chắt của parent selector đều có thể được bind event.
– HẾT –
Cám ơn các bạn đã theo dõi bài viết.