ไม่ใช่แค่ Click แต่ Shift+Click, Ctrl+Click แล้วยัง Shift+Ctrl+Click อีก

คราวนี้จะพูดถึงการดัก Event ใน jQuery… โดยปกติแล้ว jQuery จะมีการดัก Event ไว้ให้เราอยู่แล้ว โดยการใช้คำสั่ง bind หรือชื่อ event นั้น ๆ เช่น $.click() หรือ $.doubleclick() เป็นต้น แต่ถ้าเราต้องการอะไรที่มากกว่านั้นล่ัะ ที่ไม่ใช่แค่ Click หรือ Enter ธรรมดาล่ะ

บทความนี้จะยกตัวอย่างถึง Event Click และการดัก Event เพิ่มในกรณีของการกด Shift+Click, Ctrl+Click และ Shift+Ctrl+Click

โดยปกติแล้วใน event function ของ jQuery จะมีการส่ง argument ของ event กลับมาให้ด้วย ซึ่งปกติแล้วเราอาจจะไม่ได้ใช้งาน เลยไม่เคยเขียนถึง argument ตัวนี้

ดังนั้น จากตัวอย่าง click ของ window ปกติ

x.click = function(e)
{
  // e is event object
}

เมื่อเราเอามาประยุกต์ใช้ใน jQuery จะได้ดังนี้

$("div").click(
  function(e)
  {
    // e is event object
  }
);

แต่ต้องอย่าลืม เพื่อจะให้ cross-browser เราควรจะเช็ค event ที่ส่งเข้ามาด้วยว่ามีหรือไม่ ถ้าไม่มี ก็ให้ดึงจาก window.event ได้เลย

ดังนั้นจาก code ด้านบน เราจะได้หน้าตาแบบนี้

$("div").click(
  function(e)
  {
    if (!e) e = window.event;
    // e is event object
  }
);

ใน event object จะมี attribute ชนิด boolean อยู่ 2 ตัวคือ shiftKey และ ctrlKey พอมองภาพออกแล้วใช่มั๊ยครับว่าต้องทำยังไงกับมัน

shiftKey จะเป็น true เมื่อมีการกดปุ่ม shift ในขณะที่เกิด event
ctrlKey จะเป็น true เมื่อมีการกดปุ่ม shift ในขณะที่เกิด event

เมื่อพอเห็นภาพคร่าว ๆ แล้วไปดู LIVE DEMO กันได้เลยครับ