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>
<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>
</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>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
หากต้องการกำหนดเหตุการณ์ให้กับองค์ประกอบ HTML คุณสามารถใช้แอตทริบิวต์เหตุการณ์ได้
กำหนดเหตุการณ์ onclick ให้กับองค์ประกอบปุ่ม:
<button onclick="displayDate()">Try it</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>
ในตัวอย่างข้างต้น ฟังก์ชันชื่อ displayDate จะถูกดำเนินการ เมื่อคลิกปุ่ม
HTML DOM ช่วยให้คุณสามารถกำหนดเหตุการณ์ให้กับองค์ประกอบ HTML โดยใช้ JavaScript:
กำหนดเหตุการณ์ onclick ให้กับองค์ประกอบปุ่ม:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
ในตัวอย่างข้างต้น มีการกำหนดฟังก์ชันชื่อ displayDate ให้กับ องค์ประกอบ HTML ที่มี id="myBtn"
ฟังก์ชั่นจะถูกดำเนินการ เมื่อคลิกปุ่ม
เหตุการณ์ onload และ onunload จะถูกทริกเกอร์เมื่อผู้ใช้เข้าหรือออกจากเพจ
เหตุการณ์ onload สามารถใช้เพื่อตรวจสอบประเภทเบราว์เซอร์และเวอร์ชันเบราว์เซอร์ของผู้เยี่ยมชม และโหลดเวอร์ชันที่เหมาะสมของหน้าเว็บตามข้อมูล
เหตุการณ์ onload และ onunload สามารถใช้เพื่อจัดการกับคุกกี้ได้
<body onload="checkCookies()">ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<h2>JavaScript HTML Events</h2>
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
เหตุการณ์ onchange มักจะใช้ร่วมกับการตรวจสอบฟิลด์อินพุต
ด้านล่างนี้เป็นตัวอย่างวิธีการใช้ onchange ตัวพิมพ์ใหญ่() ฟังก์ชันจะถูกเรียกเมื่อผู้ใช้เปลี่ยนเนื้อหาของช่องป้อนข้อมูล
<input type="text" id="fname"
onchange="upperCase()">ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
เหตุการณ์ onmouseover และ onmouseout สามารถใช้เพื่อทริกเกอร์ฟังก์ชันเมื่อผู้ใช้ใช้เมาส์ เหนือหรือนอกองค์ประกอบ HTML:
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
เหตุการณ์ onmousedown, onmouseup และ onclick ล้วนเป็นส่วนหนึ่งของก คลิกเมาส์ ขั้นแรกเมื่อคลิกปุ่มเมาส์ เหตุการณ์ onmousedown จะเกิดขึ้น ทริกเกอร์แล้วเมื่อปุ่มเมาส์ ถูกปล่อยออกมา เหตุการณ์ onmouseup จะถูกทริกเกอร์ ในที่สุด เมื่อการคลิกเมาส์เสร็จสิ้น เหตุการณ์ onclick จะถูกทริกเกอร์
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>
onmousedown และ onmouseup
<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
document.getElementById('myimage').src = "bulbon.gif";
}
function lightoff() {
document.getElementById('myimage').src = "bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>Click mouse and hold down!</p>
</body>
</html>
เปลี่ยนรูปภาพเมื่อผู้ใช้กดปุ่มเมาส์ค้างไว้
กำลังโหลด
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage() {
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
แสดงกล่องแจ้งเตือนเมื่อโหลดเพจเสร็จแล้ว
ออนโฟกัส
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
</body>
</html>
เปลี่ยนสีพื้นหลังของช่องป้อนข้อมูลเมื่อได้รับการโฟกัส
เหตุการณ์เมาส์
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
เปลี่ยนสีขององค์ประกอบเมื่อเคอร์เซอร์เลื่อนไปเหนือองค์ประกอบนั้น
สำหรับรายการเหตุการณ์ HTML DOM ทั้งหมด โปรดดูการอ้างอิงวัตถุเหตุการณ์ HTML DOM ฉบับสมบูรณ์ของเรา