ก่อนอื่นข้อมูลสำหรับอ้างอิงของ function bind ของ jQuery อ้างอิงได้จาก
http://api.jquery.com/bind/
สำหรับตัวอย่างของเรา จะเป็นปุ่มหนึ่งปุ่ม เขียนโค้ดได้ดังนี้
<input type='button' value='click me' id='clickBtn'/>
ใช้ jQuery ผูก Event ให้กับปุ่ม
$('#clickBtn').bind('click', this, function(e) {
alert(1);
});
ยกเลิก Event ที่ผูกด้วย function unbind()
$('#clickBtn').unbind();
แต่ถ้าสมมุติว่า เรานำ Code ของผู้พัฒนาท่านอื่นมาพัฒนาต่อ ใน Code นั้นมีการ bind ให้กับปุ่มเรียบร้อยแล้ว แต่เรานำมาใช้ติดตรงที่ว่าหลังจากปุ่มนั้นกดแล้ว ทำ Event ปกติแล้วเราอยากให้ทำอย่างอื่นหลังจากนั้นอีก เทคนิคนี้เรียกว่า Bubbling จินตนาการก็เหมือนฟองอากาศลอยขึ้นไปนั้นแหละครับ เทคนิคนี้คือถ้าเราทำการ bind Event หลายๆครั้งซ้อนกัน ให้จิตนาการว่า มีการ bind Event ครอบทับกันไปเรื่อยๆ เวลา ซึ่งถ้าเรากดปุ่ม Event จะเริ่มทำงานจาก Event ที่ถูก bind อันแรกจนไปถึงอันสุดท้าย เหมือนฟองน้ำลอยจากล่างขึ้นบนนั้นแหละครับ จากตัวอย่าง bind Event keypress ก่อนหน้านี้โดยยังไม่ต้อง unbind ให้เราทำการ bind อีก Event หนึ่งเข้าไป
$j('#clickBtn').bind('keypress', this, function(e) {
alert("Bubbling");
});
ทดสอบลองกดปุ่มดู หน้าจอจะ alert เลขหนึ่งขึ้นมาก่อน แล้วจากนั้นจะ alert bubbling เทคนิคนี้เอาไว้ใช้สำหรับนำของที่ถูกพัฒนาแล้วมาพัฒนาต่อโดยไม่ต้องการไปยุ่งกับ Code เดิมของเค้าอยู่แล้วครับ
อีกวิธีหนึ่งสำหรับการ bind เราสามารถใส่ namespace ให้มันได้ด้วยเช่น เพื่อบางทีเราต้องการจะ unbind บาง Event แต่ไม่ต้องการ unbind ทั้งหมด ให้ใช้ชุดคำสั่ง jQuery ดังนี้
$('#clickBtn').bind('click.gundamExia', this, function(e) {
alert("gundamExia");
});
$('#clickBtn').bind('click.gundamUnicorn', this, function(e) {
alert("gundamUnicorn");
});
$('#clickBtn').unbind("click.gundamUnicorn");
จากตัวอย่าง code เราสามารถกำหนด namespace หลังชื่อ Event ได้แล้วคั่นด้วยจุด จากนั้น unbind ตามชื่อ Event และ namespace ได้เช่นกัน ลองทดสอบกดปุ่ม หน้าจอจะ alert แค่ gundamExia อย่างเดียวเพราะ gundamUnicorn ถูก unbind ไปแล้ว
ยังมีเทคนิคอีกหลายอย่างของ bind และ unbind ครับไว้เจอกันใหม่ในบทความหน้าครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น