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>