คราวนี้ไม่เกี่ยวกับ prototype โดยตรง แต่ยังเกี่ยวอยู่

เวลาต้องใส่ event ให้กับ html dom ก็แค่เพิ่ม event ให้มัน เช่น onclick="alert()"
แต่ถ้าเราเอามันออกได้ โดยที่การทำงานยังเหมือนเดิม code เราคงจะดูสะอาดไม่น้อย
ผมมีตัวช่วย มันคือ Lowpro

อันที่จริงมันเป็นชุดของ javascript ที่อยู่ใน Rails plugin ที่ชื่อว่า UJS(Unobtrusive Javascript)

วิธีใช้งานก็ไปโหลดมาก่อน ตาม link ที่ให้ไป แล้วก็ include ให้อยู่หลัง prototype

  1
  2
  3

<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/lowpro.js" type="text/javascript"></script>
<script src="/javascripts/application.js" type="text/javascript"></script>

application.js คือ file ที่เราจะใส่ code เราไป

มาดูที่ผมใช้บ่อยๆ ก่อน

  1
  2
  3

Event.onReady(function() {
  // $('id').doSomething();
});

Event.onReady จะรับ callback function ไป เมื่อ page โหลดทุกอย่างจบแล้ว callback function นี้ จะถูกเรียก

หรือ

  1
  2
  3
  4
  5
  6
  7
  8

Event.addBehavior({
  'a.header:click' : function(e) {
    // link to homepage
  },
  'a.header:mouseover' : function(e) {
    // switch to over stage
  }
});

อันนี้ก็ใส่พฤติกรรมให้มัน ถ้า a.header ถูกคลิกแล้วให้ link ไปยัง homepage หรือถ้าถูก rollover ให้เปลี่ยนเป็น highlight หรืออะไรก็ได้

ถ้าจะเอาตัวอย่างเต็มๆ ผมแนะนำที่นี่เลย