1. Home
  2. เหตุการณ์ HTML DOM

บทช่วยสอน เหตุการณ์ HTML DOM ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่าง,ตอบสนองต่อเหตุการณ์ที่เกิดขึ้น,ตัวอย่าง,ตัวอย่าง,เหตุการณ์ HTML คุณสมบัติ,ตัวอย่าง,ใช้ HTML DOM ที่จะกำหนดเหตุการณ์,ตัวอย่าง,onload และเหตุการณ์ onunload,ตัวอย่าง,onchange เหตุการณ์,ตัวอย่าง,onmouseover และ MV โดนเหตุการณ์,ตัวอย่าง,onmousedown, onmouseup และเหตุการณ์ onclick,ตัวอย่าง,อ้างอิงวัตถุ HTML DOM เหตุการณ์,

เหตุการณ์ HTML DOM

HTML DOM ช่วยให้เหตุการณ์ JavaScript เพื่อตอบสนองต่อ HTML

ตัวอย่าง

Mouse Over Me
Click Me

ตอบสนองต่อเหตุการณ์ที่เกิดขึ้น

เมื่อมีเหตุการณ์เกิดขึ้นคุณสามารถรัน 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>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

ลอง»

เหตุการณ์ HTML คุณสมบัติ

ในการกำหนดกิจกรรมเพื่อองค์ประกอบ HTML คุณสามารถใช้คุณลักษณะเหตุการณ์

ตัวอย่าง

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

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

ลอง»

ในตัวอย่างข้างต้นเมื่อมีการคลิกปุ่มก็ทำหน้าที่ที่มีชื่อ displayDate

ใช้ HTML DOM ที่จะกำหนดเหตุการณ์

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

ตัวอย่าง

ที่ได้รับมอบหมายองค์ประกอบปุ่มเหตุการณ์ onclick:

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

ลอง»

ในตัวอย่างข้างต้นฟังก์ชั่นที่มีชื่อว่า displayDate ได้รับมอบหมายให้ id = myButn "องค์ประกอบของ HTML

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

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

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

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

onload และ onunload เหตุการณ์สำหรับการจัดการคุกกี้

ตัวอย่าง

<body onload ="checkCookies()">

ลอง»

onchange เหตุการณ์

onchange เหตุการณ์มักจะใช้ในการตรวจสอบช่องใส่

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการใช้ onChange เมื่อผู้ใช้มีการเปลี่ยนแปลงเนื้อหาของช่องใส่จะได้รับการเรียกตัวพิมพ์ใหญ่ () ฟังก์ชัน

ตัวอย่าง

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

ลอง»

onmouseover และ MV โดนเหตุการณ์

onmouseover และ MV โดนเหตุการณ์สามารถนำมาใช้ในการเรียกฟังก์ชั่นเมื่อชี้เมาส์ย้ายเข้าหรือออกจากองค์ประกอบ

ตัวอย่าง

ที่เรียบง่ายเช่น onmouseover-onmouseout:

Mouse Over Me

ลอง»

onmousedown, onmouseup และเหตุการณ์ onclick

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

ตัวอย่าง

ที่เรียบง่ายเช่น onmousedown-onmouseup:

Click Me

ลอง»

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

สำหรับคำอธิบายที่เต็มรูปแบบและตัวอย่างของแต่ละเหตุการณ์กรุณาเยี่ยมชมของเรา HTML คู่มืออ้างอิง DOM

บทแนะนำยอดนิยม

Contact US

เหตุการณ์ HTML DOM
10/30