เหตุการณ์จาวาสคริปต์

สารบัญ

    แสดงสารบัญ

เหตุการณ์ HTML คือ "สิ่ง" ที่เกิดขึ้นกับองค์ประกอบ HTML

เมื่อใช้ JavaScript ในหน้า HTML JavaScript สามารถ เปิด "โต้ตอบ" เหตุการณ์เหล่านี้

เหตุการณ์ HTML

เหตุการณ์ HTML อาจเป็นสิ่งที่เบราว์เซอร์ทำหรือเป็นสิ่งที่ผู้ใช้ทำ

นี่คือตัวอย่างบางส่วนของเหตุการณ์ HTML:

  • โหลดหน้าเว็บ HTML เสร็จแล้ว

  • ช่องป้อนข้อมูล HTML มีการเปลี่ยนแปลง

  • มีการคลิกปุ่ม HTML

บ่อยครั้งเมื่อมีเหตุการณ์เกิดขึ้น คุณอาจต้องการทำอะไรบางอย่าง

JavaScript ช่วยให้คุณรันโค้ดเมื่อตรวจพบเหตุการณ์

HTML อนุญาตให้เพิ่มแอตทริบิวต์ตัวจัดการเหตุการณ์ พร้อมโค้ด JavaScript ลงในองค์ประกอบ HTML

ด้วยเครื่องหมายคำพูดเดี่ยว:

<element
 event='some JavaScript'>

ด้วยเครื่องหมายคำพูดคู่:

<element
 event="some JavaScript">

ในตัวอย่างต่อไปนี้ คุณลักษณะ onclick (พร้อมโค้ด) จะถูกเพิ่มลงใน <รหัส class="w3-codespan"><button> องค์ประกอบ:

ตัวอย่าง

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

ในตัวอย่างข้างต้น รหัส JavaScript จะเปลี่ยนเนื้อหาของ องค์ประกอบที่มี id="demo"

ในตัวอย่างถัดไป รหัสจะเปลี่ยนเนื้อหาของ องค์ประกอบของตัวเอง (โดยใช้ this.innerHTML):

ตัวอย่าง

<button onclick="this.innerHTML = Date()">The time is?</button>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

โค้ด JavaScript มักมีความยาวหลายบรรทัด เป็นเรื่องปกติที่จะเห็นการเรียกใช้ฟังก์ชันแอตทริบิวต์ของเหตุการณ์:

ตัวอย่าง

<button onclick="displayDate()">The time is?</button>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

เหตุการณ์ HTML ทั่วไป

นี่คือรายการเหตุการณ์ HTML ทั่วไปบางส่วน:

onchange

องค์ประกอบ HTML มีการเปลี่ยนแปลง

onclick

ผู้ใช้คลิกองค์ประกอบ HTML

onmouseover

ผู้ใช้เลื่อนเมาส์ไปเหนือองค์ประกอบ HTML

onmouseout

ผู้ใช้เลื่อนเมาส์ออกจากองค์ประกอบ HTML

onkeydown

ผู้ใช้กดแป้นคีย์บอร์ด

onload

เบราว์เซอร์โหลดหน้าเว็บเสร็จแล้ว

รายการยาวกว่านี้มาก: เหตุการณ์อ้างอิง HTML DOM ของ W3Schools JavaScript

ตัวจัดการเหตุการณ์ JavaScript

ตัวจัดการเหตุการณ์สามารถใช้เพื่อจัดการและตรวจสอบอินพุตของผู้ใช้ การกระทำของผู้ใช้ และการทำงานของเบราว์เซอร์:

  • สิ่งที่ควรทำทุกครั้งที่โหลดเพจ

  • สิ่งที่ควรทำเมื่อปิดเพจ

  • การกระทำที่ควรทำเมื่อผู้ใช้คลิกปุ่ม

  • เนื้อหาที่ควรได้รับการตรวจสอบเมื่อผู้ใช้ป้อนข้อมูล

  • และอื่น ๆ ...

สามารถใช้วิธีการต่างๆ มากมายเพื่อให้ JavaScript ทำงานกับเหตุการณ์ได้:

  • คุณลักษณะเหตุการณ์ HTML สามารถรันโค้ด JavaScript ได้โดยตรง

  • คุณลักษณะเหตุการณ์ HTML สามารถเรียกใช้ฟังก์ชัน JavaScript

  • คุณสามารถกำหนดฟังก์ชันตัวจัดการเหตุการณ์ของคุณเองให้กับองค์ประกอบ HTML ได้

  • คุณสามารถป้องกันไม่ให้มีการส่งหรือจัดการกิจกรรมได้

  • และอื่น ๆ ...

คุณจะได้เรียนรู้เพิ่มเติมมากมายเกี่ยวกับเหตุการณ์และตัวจัดการเหตุการณ์ในบท HTML DOM