ความแตกต่างของ .bind(), .live(), และ .delegate()

สวัสดีจ้า ไม่ได้อัพเดทเป็นเวลานานอีกแล้วครับ แฮ่ะๆ วันนี้นำเสนอเรื่องราวของ .bind(), .live(), .delegeate() ดีกว่าครับ เพราะมีหลายคนที่งง และสงสัย ว่ามันต่างกันอย่างไร และเอาไปใช้งานในงานลักษณะใหน ใช้กันตอนใหน เอาเป็นว่าคลิกเข้ามาอ่านด้านในกันเลยดีกว่าครับ :)

Image from : http://www.alfajango.com

เริ่มกันเลยไม่ต้องยืดยาวกันมาก เน้นกระชับๆละกันนะครับ ช่วงนี้เวลาในการเขียน Blog ของผมค่อนข้างจะน้อยลงเดี๋ยวจะต้องจัดตารางเวลากันใหม่สักหน่อยครับ เอาละ เรามาว่ากันที่เจ้า method .bind(); กันก่อนเลย เพื่อนๆหลายคนสงสัยกันมากว่ามันเอาไว้ทำอะไร โดยเฉพาะ โปรแกรมเมอร์มือใหม่ เจ้าตัว method .bind นี้นะครับ เอาไว้จำหรับการ ผูก หรือ นำเอา Events เช่น Click, Mouse Over หรือที่เรียกกันว่า CSS Selector เอาไปกำหนดให้กับ Element ที่เราต้องการ เช่นกำหนดให้กำ Element <a> เป็นต้น

1	$('a').bind('click', function(e){ alert( 'Clicked!!' ); });

จาก code ตัวอย่างด้านบน เป็นการ binding event Click ให้กับ Elements ทั้งหมด ที่อยู่ภายใต้ Docment Root นะครับ เพื่อนๆบางท่านอาจจะงงว่า Document root คืออะไร ดูตามตัวอย่างด้านล่างนี้ครับน่าจะ เข้าใจง่ายขึ้น

1 2 3 4 5 6 7 8 9 10 11

//This is DOM Tree window    |_document       |_H1       |_H2       |_p             |_span             |_a       |_form             |_input             |_submit

จาก DOM Tree ด้านบนนี้จะเห็นว่า document นั้นเป็น Root บนสุดของทุกๆ Element หรือจะเรียกว่าเป็น Root node ก็ว่าได้ ดังนั้นเวลาที่เรา binding events เข้าไปที่ Elements A ตัว jQuery Object จะทำการ Scan หา TAG A หรือ Elements A แล้วทำการใสคำสั่ง click เข้าไป

จะเห็นว่าเจ้า method .build เนี่ย มันจะทำงานได้กับ Elements ที่มีอยู่ในขณะนั้นเท่านั้น ถ้าหากว่า มีการเพิ่ม Elements A เข้ามาภายหลัง เช่น เกิดจากการโหลดมาจาก AJAX เข้ามา พวก Element A ที่เข้ามาทีหลังนั้น จะไม่ถูก binding event click เข้าไป ซึ่งเพื่อนๆหลายท่านคงจะเคยเจอปัญหาแบบนี้นะครับ

เพื่อแก้ไขปัญหานี้จึงเกิด Methods ใหม่ขั้นมาอีกสองตัวคือ .live() และ .delegate()
.live() และ .deledate() นั้นจริงๆแล้วเหมือนกันครับ เพียงแต่ .delegate() จะทำงานได้เร็วกว่า .live() ส่วนที่ว่าทำไมถึงทำงานได้เร็วกว่านั้น เดี๋ยวผมขอเวลาไปหาคำตอบก่อนนะครับ แฮ่ะๆ ขอติดไว้ก่อน

1	$('a').live() == $(document).delegate('a')

มาสรุปกันเลยว่า .bind(), .live or .delegate() นั้นใช้ต่างกันอย่างไร

1 2 3 4 5

$('a').bind( 'click', function(e){ alert('This is method bind.'); })

จาก code ด้านบนนี้ .bind นั้นจะสามารถใส่ event ให้กับ Element ที่มีอยู่ในขณะนั้นเท่านั้น ไม่สามารถกำหนด event ให้กับ element ที่เพิ่มเข้ามาทีหลังไม่ได้

1 2 3

$('a').live('click', function() { alert('This is live') }); // or $(document).delegate('a', 'click', function() { alert('This is Delegate); });

Code ด้านบนนี้สามารถกำหนด event ให้กับ Element A ได้ ถึงแม้ขณะนั้น ยังไม่มี Element A ใน document root ก็ตาม เช่น เมื่อมีการโหลด HTML เข้ามาผ่านทาง AJAX โดยที่มี Element A ติดเข้ามาด้วย Element A ที่เข้ามานั้นก็จะถูกจับ event click ใส่เข้าไปทันที

ผมคิดว่าบทความนี้ก็น่าจะพอแก้ไขปัญหา ข้อข้องใจของเพื่อนๆได้พอสมควรนะครับ ถ้าสงสัยตรงใหน ถามใน Facebook ได้เลยนะครับ http://www.facebook.com/jQuery.in.th