Javascript Event Binding

การ Binding Event ใน JavaScript คือ การกำหนดชุดคำสั่งเมื่อเกิดเหตุการณ์ขึ้นกับ Element ในหน้าเว็บ เช่น ผู้ใช้คลิกที่ Element หรือเมื่อผู้ใช้เปลี่ยนตัวเลือกใน Select Element

Javascript Event Binding

 

แบบที่ 1 กำหนด function ที่จะทำงานลงใน element

<button class='btn btn-primary' onclick="click_function()" >OK</button>
<script>
 function click_function() { //กำหนดให้เมื่อผู้ใช้ click ปุ่ม OK
     alert('Click !!!');
}
</script>

แบบที่ 2 ใช้คำสั่ง document.addeventlistener

<button id="my_button" class='btn btn-primary' >OK</button>

<script>

document.getElementById("my_button").addEventListener("click",click_function)

 function click_function() {
     alert('Click !!!');
}

</script>

• กำหนด id ให้กับ Element ( ในที่นี้ชื่อ my_button ) โดยเมื่อการกำหนด id ให้กับแต่ละ Element จะต้องไม่ซ้ำกัน
•  document.getElementById("id ของ element").addEventListener("ชื่อ event","ชื่อ function")

jQuery Event Binding

<button id="my_button" class='btn btn-primary' >OK</button>

<script>

$("#my_button").on("click",click_function) ;

 function click_function() {
     alert('Click !!!');
}

</script>

•  เราใช้ $("#my_button") แทน document.getElementById("my_button")
• อย่าลืม # นำหน้า id ของ element

ตัวอย่าง "change" event สำหรับ  select element

<select class="form-control" id="my_select" >
       <option value=""></option>
       <option value="1">ตัวเลือกที่ 1</option>
       <option value="2">ตัวเลือกที่ 2</option>
       <option value="3">ตัวเลือกที่ 3</option>
</select>

<script>

$("#my_select").on("change",change_function) ;// เปลี่ยนจาก click event เป็น change event

 function change_function() {
     alert('Select Changed!!!');
}

       
</script>