jQuery ผูก Event ให้กับปุ่มต่างๆ ด้วย jQuery และเทคนิค Bubbling

ก่อนอื่นข้อมูลสำหรับอ้างอิงของ 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 ครับไว้เจอกันใหม่ในบทความหน้าครับ

jQuery ตัวอย่างดึงชุดข้อมูล จากสอง fieldset โดยสร้าง function ดึงข้อมูลโดยให้ jQuery ค้นหาจาก id โดยไม่สนใจตัวอักษรเล็กใหญ่ของ id ในแต่ละ field

วิธีใช้ jQuery ดึงข้อมูลโดยไม่สนใจ id ว่าตัวอักษรเป็นตัวใหญ่หรือตัวเล็กของภาษาอังกฤษ

       ตัวอย่างต่อไปนี้ ผมจะทำการสาธิตการสร้าง function ของ javascript สำหรับเป็น function ในการดึงข้อมูลจาก fieldset ซึ่ง function นี้จะทำการ return ค่า Object ที่เก็บข้อมูล "ที่อยู่" ซึ่งผู้ใช้ function นี้จะสามารถนำข้อมูลที่อยู่ไปจัดการข้อมูลได้ง่ายขึ้น

 ในตัวอย่าง ผมสร้าง 2 fieldset สำหรับกรอกข้อมูลที่อยู่ มีสองรูปแบบ คือ ประเภทที่อยู่อาศัย กับ ประเภทที่อยู่ทางการ เพราะสิ่งที่เราต้องการคือ จะดึงข้อมูลต่างๆเหล่านี้ใน textbox ทั้งหมดไปเก็บใน Object แล้ว return ค่าออกจาก function ขั้นตอนแรกจึงจำเป็นจะต้องสร้าง function มาจัดการข้อมูลให้เป็นระเบียบแล้วเก็บใส่ Object ให้เรียบร้อย สำหรับตัวอย่างเขียน fieldset มีดังนี้ ก๊อบไปแปะแล้วลองทำตามได้เลย

<fieldset id='residentAddressFieldset'>
    <legend>ที่อยู่อาศัย</legend>
    อาคาร <input type='text' id='residentAddressName'/>
    เลขที่<input type='text' id='residentAddressNo' />
    จังหวัด อำเภอ<input type='text' id='residentRegionAddress'/>
    เบอร์โทร<input type='text' id='residentPhone' />
</fieldset>
<fieldset id='addressFieldset'>
    <legend>ที่อยู่ทางการ</legend>
    อาคาร <input type='text' id='addressName'/>
    เลขที่<input type='text' id='addressNo' />
    จังหวัด อำเภอ<input type='text' id='regionAddress'/>
    เบอร์โทร<input type='text' id='phone' />
</fieldset>

/* ผมสร้าง function สำหรับจัดการข้อมูลต่างๆได้ดังนี้*/

function getAddressInfoFormField(selector){

/*ขั้นตอนแรกผมสร้าง Object ขึ้นมาหนึ่งตัวชื่อ addressInfo แล้วกำหนดค่าเริ่มต้นให้กับแต่ละ attribute ดังนี้*/

    var addressInfo = new Object();
    addressInfo.addressName = '';/*ค่าเริ่มต้นเป็นช่องว่าง*/
    addressInfo.addressNo = '';
    addressInfo.addressRegion = '';
    addressInfo.addressPhone = '';

/*เริ่มใช้ jQuery เพื่อกดหนดค่าให้กับ addressName จาก selector ที่ส่งมาจาก parameter เราตั้งใจจะให้เป็น wrapped set ของ fieldset อธิบายง่ายๆก็คือส่งตัว fieldset มาแล้วเราสามารถค้นหาตัวต่างๆภายใน fieldset นั้นได้หมดแล้วนำข้อมูลมาใช้งาน ดังนั้นให้มองว่า selector คือ fieldset ตัวหนึ่ง เราสามารถใช้คำสั่ง find ของ jQuery เพื่อค้นหาตัวต่างๆที่อยู่ภายใน แต่ในการค้นหาคราวนี้เราต้องการให้ค้นหาโดยไม่สนใจชื่อ id ที่เป็นตัวอักษรใหญ่เล็กของภาษาอังกฤษ เราจึงจำเป็นต้องใช้คำสั่ง filter มาช่วยกรอง แล้วกำหนดการกรองข้อมูลเอาเองโดยส่ง parameter ลงให้กับฟังก์ชั่น filter เป็น function กำหนดเงื่อนไขการกรอง*/


        /*ใช้ regular expression ของ javascript มาช่วย ตรง addressName แล้วใส่ ig เพื่อไม่ให้สนใจตัวอักษรใหญ่เล็ก จากนั้นให้ทำการ test กับ id ที่ส่งเข้ามาใน function filter ถ้า test ผ่านก็ให้ return ตัวๆนั้นออกไป*/

    addressInfo.addressName = selector.find("*").filter(function(){
        return (/addressName/ig).test(this.id);
    }).val(); 

/*ใช้ val() เพื่อดึงค่าข้อมูลในช่องๆที่ jQuery ดึงมาได้จาก filter*/
   
    addressInfo.addressNo = selector.find("*").filter(function(){
        return (/addressNo/ig).test(this.id);
    }).val();
      
    addressInfo.addressPostal = selector.find("*").filter(function(){
        return (/regionAddress/ig).test(this.id);
    }).val();
   
    addressInfo.addressPhone = selector.find("*").filter(function(){
        return (/phone/ig).test(this.id);
    }).val();

 /*สรุป ใช้ selector ที่เป็นตัวแทนของ fieldset จากนั้นใช้ find("*") โดย * นั้นหมายถึงให้ดึงข้อมูลทุกตัวภายใต้ fieldset จากนั้นใช้ filter กรองเอาข้อมูลที่ต้องการ แต่เรากำหนด filter ให้กรองข้อมูล id โดยกำหนดให้ไม่สนใจตัวอักษรใหญ่เล็กของภาษาอังกฤษ ด้วยวิธีกำหนด function ลงใน filter*/

/*return addressInfo ที่เป็น Object ที่เราดึงข้อมูลมาเก็บออกไป*/
    return addressInfo;
};

วิธีใช้งาน function ที่เราสร้างมานี้

       จาก Code fieldset ตัวอย่างของเรานี้ กับ function ที่เราสร้างสมมุติว่าผมต้องการชุดข้อมูลใน fieldset ที่มี id คือ residentAddressFieldset ผมเรียก function ดังนี้

 var addressInfo = getAddressInfoFormField($('#residentAddressFieldset'));

ใช้ jQuery ดึง wrapped set ที่เป็น fieldset ที่มี id เป็น residentAddressFieldset จากนั้นเอาไปเก็บในตัวแปร addressInfo 

ใน addressInfo นี้ถ้าต้องการ addressNo ก็ให้ใส่จุดแล้วใส่ชื่อ attribute ที่เราต้องการข้อมูลของมันได้เลย เช่น

addressInfo.addressNo;

จบตัวอย่าง สาธิตการสร้าง function javascript ผสม jQuery เพื่อดึงชุดข้อมูล ในตัวอย่างนี้ function มีประโยชน์มากสมควรสร้างขึ้นมา เพราะไม่ว่าเราจะมีชุดข้อมูลใน fieldset กี่อย่างๆที่เกี่ยวกับ 'ที่อยู่' เวลาทำงาน ให้เราเรียกใช้ function ตัวที่เราสร้างมาเพื่อที่จะดึงข้อมูลมาใช้ประโยชน์ได้ทันที แต่ในกรณีตัวอย่างนี้ที่ผมเอาไปใช้จริง ผมดึงข้อมูลชุดข้อมูล 'ที่อยู่' ออกมาแล้วนำมาเรียงที่อยู่ให้สวยงามแล้วแสดงออกทางหน้าจอให้ user ได้เห็นแบบสวยๆงามๆ