จับ Events ตรงๆเหรอ เค้าเลิกแล้ว

หลายๆ ท่านที่เขียน JavaScript คงจะเคยชินกับการจับ Events ต่างๆ เช่น onclick, onblur, onkeyup, onkeydown, etc. ซึ่งตัวผมเองคิดว่าไอ้พวกนี้มันไม่มีผลดีต่อ SEO นัก เพราะ SE ไม่มองอยู่แล้ว จรืงมั้ย ?

แต่ว่าพอเปลี่ยนมาเป็น jQuery ล่ะ ไม่ต้องจับ Events พวกนี้เหรอ ปล่าวครับ ก็ยังจับเหมือนเดิมเพียงแต่ว่า ไม่ได้จับตรงๆ แต่ใช้การดัก Event จากตำแหน่งของ เอกสาร (DOM)

มันเป็นยังไงน่ะเหรอ เอ้าลองมาดูกัน….

สมมุติผมจะเขียน onclick ตามปกติของ JavaScript ผมก็จะเขียนแบบนี้
Go to Google< /a>

ซึ่งลองมาดูกันตามหลัก SEO จะเห็นว่า SE มองที่ # และก็ไม่สามารถไปต่อตาม link ที่เรากำหนดไป เพราะมันไม่สน onclick ซึ่งเป็น event ใน JavaScript อยู่แล้ว

แต่ถ้าเราเปลี่ยนเป็น jQuery ล่ะ ?
Go to Google< /a>

อยากให้ทุกคนอย่าเพิ่งมองมันเป็น link ธรรมดานะครับ คือแค่ยกตัวอย่า บางที่มันอาจจะเป็น link ajax หรือ อะไรสักอย่างก็ได้ แต่ผมขี้เกียจเขียนตัวอย่างยาวๆอ่ะ -*-

แล้วเขียน jQuery ดังนี้
$(function() {
$("#mylink").click(function() {
var target = $(this).attr('href');
location.href = target;
return false;
});
});

เห็นมั้ยครับ เราสามารถเรียกค่า รวมถึงจับ Events ได้โดยการดักจาก หน้าเอกสารเลยไม่ต้องเขียนตรงๆ แถมยังได้คะแนน จาก SE ไปเต็มๆ

เอาล่ะครับก่อนจะต่อบทความใหม่ผมอยากให้คนที่สนใจไปศึกษาเรื่อง Events เพิ่มเติมก่อนจาก link ด้านล่างกันก่อน
http://docs.jquery.com/Events

บทความหน้าจะเป็นเรื่องเกี่ยวกับ selector ครับ ต้องบอกไว้เลยว่าไม่ง่ายนัก แต่ว่าทำงานได้หลากหลายมากๆ สามารถเลือกทุกสิ่งทุกอย่าจากหน้าเอกสารได้เลย รับรอง เจ๋ง !

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Comments »

 
  • Poxline says:

    สุดยอดดี ขอบคุณมากๆนะครับที่อธิบาย ต่อๆๆๆ

  • Bill says:

    อ่าเริ่มเข้าใจแหละ ขอบคุณ บทความดีๆ ครับผม

  • Tauruserz says:

    ขอบคุณครับ ง่ายมาก ๆ เลย กำลังหา tutorial ศึกษาเยอะ ๆ อยู่
    แต่ที่ http://docs.jquery.com/ ไม่ค่อยมีตัวอย่างให้ดูเลย แย่จัง

  • deen says:

    ขอบบบบคุณค๊าบบบบบบบ

 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>