JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


JavaScript HTML DOM เหตุการณ์


HTML DOM อนุญาตให้ JavaScript ตอบสนองต่อเหตุการณ์ HTML:

วางเมาส์เหนือฉัน
คลิกฉัน

ปฏิกิริยาต่อเหตุการณ์

JavaScript สามารถดำเนินการได้เมื่อมีเหตุการณ์เกิดขึ้น เช่น เมื่อผู้ใช้คลิกที่องค์ประกอบ HTML

หากต้องการรันโค้ดเมื่อผู้ใช้คลิกที่องค์ประกอบ ให้เพิ่มโค้ด JavaScript ลงในแอตทริบิวต์เหตุการณ์ HTML:

onclick=JavaScript

ตัวอย่างของเหตุการณ์ HTML:

  • เมื่อผู้ใช้คลิกเมาส์
  • เมื่อโหลดหน้าเว็บแล้ว
  • เมื่อโหลดรูปภาพแล้ว
  • เมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ
  • เมื่อช่องใส่ข้อมูลเปลี่ยนไป
  • เมื่อส่งแบบฟอร์ม HTML
  • เมื่อผู้ใช้กดแป้น

ในตัวอย่างนี้ เนื้อหาของ<h1>องค์ประกอบจะเปลี่ยนไปเมื่อผู้ใช้คลิกที่องค์ประกอบ:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>

ในตัวอย่างนี้ ฟังก์ชันถูกเรียกจากตัวจัดการเหตุการณ์:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>


แอตทริบิวต์เหตุการณ์ HTML

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

ตัวอย่าง

กำหนดเหตุการณ์ onclick ให้กับองค์ประกอบปุ่ม:

<button onclick="displayDate()">Try it</button>

ในตัวอย่างข้างต้น ฟังก์ชันที่มีชื่อdisplayDateจะถูกดำเนินการเมื่อมีการคลิกปุ่ม


กำหนดกิจกรรมโดยใช้ HTML DOM

HTML DOM ช่วยให้คุณสามารถกำหนดเหตุการณ์ให้กับองค์ประกอบ HTML โดยใช้ JavaScript:

ตัวอย่าง

กำหนดเหตุการณ์ onclick ให้กับองค์ประกอบปุ่ม:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

ในตัวอย่างข้างต้น ฟังก์ชันที่ตั้งชื่อdisplayDateถูกกำหนดให้กับองค์ประกอบ HTML ด้วยนามสกุลid="myBtn".

ฟังก์ชั่นจะทำงานเมื่อมีการคลิกปุ่ม


เหตุการณ์ onload และ onunload

เหตุการณ์onloadและ จะถูกท onunloadริกเกอร์เมื่อผู้ใช้เข้าหรือออกจากหน้า

สามารถใช้ เหตุการณ์onloadเพื่อตรวจสอบประเภทเบราว์เซอร์และเวอร์ชันของเบราว์เซอร์ของผู้เข้าชม และโหลดหน้าเว็บเวอร์ชันที่เหมาะสมตามข้อมูล

สามารถใช้เหตุการณ์และเพื่อจัดการกับคุกกี้onloadได้onunload

ตัวอย่าง

<body onload="checkCookies()">

เหตุการณ์ onchange

เหตุการณ์onchangeนี้มักใช้ร่วมกับการตรวจสอบความถูกต้องของช่องป้อนข้อมูล

ด้านล่างนี้คือตัวอย่างวิธีการใช้ onchange ฟังก์ชันupperCase() นี้จะถูกเรียกเมื่อผู้ใช้เปลี่ยนเนื้อหาของช่องป้อนข้อมูล

ตัวอย่าง

<input type="text" id="fname" onchange="upperCase()">

กิจกรรม onmouseover และ onmouseout

สามารถใช้ เหตุการณ์onmouseoverand onmouseoutเพื่อทริกเกอร์ฟังก์ชันเมื่อผู้ใช้วางเมาส์เหนือหรือออกจากองค์ประกอบ HTML:

วางเมาส์เหนือฉัน


onmousedown, onmouseup และ onclick Events

onmousedown, onmouseup, และเหตุการณ์onclickทั้งหมดเป็นส่วนหนึ่งของการคลิกเมาส์ ขั้นแรกเมื่อมีการคลิกปุ่มเมาส์ เหตุการณ์ onmousedown จะถูกทริกเกอร์ จากนั้นเมื่อปล่อยปุ่มเมาส์ เหตุการณ์ onmouseup จะถูกทริกเกอร์ ในที่สุด เมื่อการคลิกเมาส์เสร็จสิ้น เหตุการณ์ onclick จะถูกทริกเกอร์

Click Me


ตัวอย่างเพิ่มเติม


เปลี่ยนภาพเมื่อผู้ใช้กดปุ่มเมาส์ค้างไว้


แสดงกล่องแจ้งเตือนเมื่อหน้าโหลดเสร็จ


เปลี่ยนสีพื้นหลังของฟิลด์อินพุตเมื่อได้รับโฟกัส


เปลี่ยนสีขององค์ประกอบเมื่อเคอร์เซอร์เลื่อนไปเหนือองค์ประกอบนั้น


การอ้างอิงวัตถุเหตุการณ์ HTML DOM

สำหรับรายการเหตุการณ์ HTML DOM ทั้งหมด โปรดดูที่HTML DOM Event Object Referenceทั้งหมดของเรา