Latest web development tutorials

เหตุการณ์ 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