วันศุกร์ที่ 14 ตุลาคม พ.ศ. 2554

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


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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น