Javascript Event

Event คืออะไร ?

การสื่อสารอีกประเภทคือการสื่อสาร "html ส่ง Event ไปยัง javascript" เพื่อให้ javascript ทำการจัดการหลังเกิด Event แล้ว

Event คือสิ่งที่เกิดขึ้นบนเว็บไซต์ซึ่งเกิดอาจจะเกิดจากเหตุการณ์บน browser (เช่น โหลดเว็บเสร็จ, resize หน้าจอ) หรือ เหตุการณ์จาก user เช่น

• เมื่อคลิกที่ปุ่มแล้วเกิดอะไรขึ้น (onclick)
• เมื่อ user กำลังเปลี่ยนของใน radio (onchange)
• เมื่อ user กำลังพิมพ์ที่กล่องข้อความให้เกิดอะไรขึ้น (onkeydown)
• เมื่อ user เอาเมาส์วางบนข้อความเกิดอะไรขึ้น (onmouseover)

ตัวอย่างการส่งค่า Event จาก html ไปยัง javascript

1. onclick การดักจับ event เมื่อ user มีการคลิกที่ element ใน html (ใช้ได้กับทุก element แต่ส่วนใหญ่จะใช้กับปุ่ม หรือ สิ่งที่ user สามารถคลิกได้)

ตัวอย่าง เพิ่ม onclick ให้กับ button เมื่อ button โดนกดโดย user จะแสดงข้อความออกมาตรง console.log

<button onclick="userClick()">ทดลองกด</button>

...
<script>
// สร้าง function สำหรับการรับ Event ชื่อ userClick และ function นี้จะถูกเรียกเมื่อ onclick ทำงาน
function userClick() {
    console.log('user clicked')
}
</script>

2. onchange การดักจับเมื่อ input มีการเปลี่ยนแปลงค่า (ปกติใช้ได้กับ input อย่าง text, radio, checkbox)

ตัวอย่าง เพิ่ม onchange ให้กับ radio เพศ โดยเมื่อเปลี่ยนเพศให้แสดงเพศที่เปลี่ยนออกมา (เราจะใช้ร่วมกับ querySelector ก่อนหน้านี้)

<input type="radio" name="gender" value="ชาย" onchange="changeGender()"> ชาย
<input type="radio" name="gender" value="หญิง" onchange="changeGender()"> หญิง
<input type="radio" name="gender" value="ไม่ระบุ" onchange="changeGender()"> ไม่ระบุ

...
<script>
// สร้าง function สำหรับการรับ Event ชื่อ changeGender และ function นี้จะถูกเรียกเมื่อ onchange ทำงาน
function changeGender() {
    const selectedGender = document.querySelector('input[name=gender]:checked')
    console.log('selected gender', selectedGender.value)
}
</script>

3. onkeydown, onkeyup, onkeypress การดักจับเมื่อ user มีการกดลง keyboard

• onkeydown = เมื่อ user กดลงบน keyboard (จังหวะกด)
• onkeyup = เมื่อ user กดปล่อยมือจากปุ่ม keyboard (จังหวะปล่อยหลังกด)
• onkeypress = จังหวะที่ตัวอักษรถูกส่งออกมา (เกิดหลัง onkeydown, เกิดก่อน onkeyup)

ตัวอย่าง เพิ่มจังหวะ onkeypress ดักจับตอนที่ user กำลังพิมพ์ input ออกมา ให้ข้อความที่พิมพ์ในกล่อง input แสดงออกมาผ่าน console (ใช้ร่วมกับ querySelector)

ชื่อจริง <input type="text" name="firstname" onkeypress="changeName()">
...

<script>
function changeName () {
    const firstNameInput = document.querySelector('input[name=firstname]')
    console.log('change firstname', firstNameInput.value)
}
</script>

4. onmouseover, onmouseup, onmousedown การดักจับเมื่อ uesr เอาเมาส์ไปวางที่ element html นั้นๆ

• onmouseover เมื่อเมาส์วางอยู่บน element นั้น (หรือตัวลูกของมัน)
• onmousedown เมื่อคลิกเมาส์ที่ชิ้นนั้น (กำลังคลิก)
• onmouseup เมื่อปล่อยเมาส์ที่กำลังคลิกนั้นออก

ลำดับที่เกิดขึ้นคือ onmouseover > onmousedown > onmouseup

ตัวอย่าง

<p id="myP"
    onmousedown="mouseDown()" 
    onmouseup="mouseUp()"
    onmouseover="mouseOver()">
    ข้อความใดๆ
</p>
...
<script>
function mouseDown() {
  console.log('ข้อความถูก mouseDown')
}

function mouseUp() {
  console.log('ข้อความถูก mouseUp')
}

function mouseOver() {
  console.log('เมาส์กำลังอยู่บนข้อความ')
}
</script>

ดูตัวอย่างเพิ่มเติมได้ที่ https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown

ตัวอย่างการ bind event ด้วย addEventListener

อีกท่าหนึ่งที่สามารถเพิ่ม event เข้าไปได้ คือท่า addEventListener มีความแตกต่างตรงนี้ addEventListener จะทำการ access DOM แล้วเพิ่มเองจาก javascript (แตกต่างจากด้านบนที่ใส่ผ่าน html)

วิธีการใช้ท่า addEventListener คือการเพิ่มลงใน javascript ทันทีตอนเปิด tag <script> มา และใช้ชื่อ event โดยการลบ "on" นำหน้าทิ้งไป (ดูตามตัวอย่างเพิ่มเติม แต่ Event ดักจับเหมือนกับท่าบน)

ตัวอย่างที่ 1 การเพิ่ม event click

<button id="testbutton">ปุ่มที่ 1</button>
<button onclick="clickButton()">ปุ่มที่ 2</button>

<script>
document.getElementById('testbutton').addEventListener('click', function() {
  console.log('คลิกปุ่มที่ 1')
})
function clickButton () {
  console.log('คลิกปุ่มที่ 2')
}
</script>

เพื่อให้เข้าใจง่ายไปในทิศทางเดียวกัน เราจะยังไม่ใช้ท่านี้ตลอด Session นี้ เคสนี้จะเหมาะกับกรณีที่มีการสร้าง DOM และต้องการเพิ่ม Event เองจาก Javascript ซึ่งถ้ามีโอกาสจะพาใช้งานอีกที

สำหรับแหล่งรวมข้อมูลทั้งหมดสำหรับ javascript event ดูเพิ่มเติมได้ที่นี่ https://www.w3schools.com/js/js_events.asp