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>