เหตุการณ์ JavaScript HTML DOM
HTML DOM JavaScript, HTML มีความสามารถในการตอบสนองต่อเหตุการณ์ที่เกิดขึ้น
ตัวอย่าง
ตอบสนองต่อเหตุการณ์ที่เกิดขึ้น
เราสามารถรัน JavaScript เมื่อมีเหตุการณ์เกิดขึ้นเช่นเมื่อผู้ใช้คลิกที่องค์ประกอบของ HTML
รันรหัสเมื่อผู้ใช้คลิกที่องค์ประกอบเพิ่มรหัส JavaScript เพื่อแอตทริบิวต์เหตุการณ์ HTML:
ตัวอย่างเหตุการณ์ HTML:
- เมื่อผู้ใช้คลิกเมาส์
- เมื่อโหลดหน้าเว็บ
- เมื่อภาพมีการโหลด
- เมื่อเมาส์เลื่อนไปเหนือองค์ประกอบ
- เมื่อช่องใส่ที่มีการเปลี่ยนแปลง
- เมื่อคุณส่งรูปแบบ HTML ไป
- เมื่อผู้ใช้ทริกเกอร์ที่สำคัญ
ในตัวอย่างนี้เมื่อผู้ใช้บน <h1> องค์ประกอบเมื่อคลิกแล้วจะมีการเปลี่ยนแปลงเนื้อหา:
ตัวอย่าง
<html>
<body>
<h1 onclick = "this.innerHTML = 'อ๊ะ!'"> คลิกที่ข้อความ! </ h1>
</ body>
</ html>
ลอง»
ในกรณีนี้จะเรียกฟังก์ชั่นจากตัวจัดการเหตุการณ์นี้:
ตัวอย่าง
<html>
<head>
<script>
ฟังก์ชั่น changetext (ID)
{
id.innerHTML = "อ๊ะ!";
}
</ script>
</ head>
<body>
<h1 onclick = "changetext (นี้)"> คลิกที่ข้อความ! </ h1>
</ body>
</ html>
ลอง»
เหตุการณ์ HTML คุณสมบัติ
ในการกำหนดกิจกรรมเพื่อองค์ประกอบ HTML คุณสามารถใช้คุณลักษณะเหตุการณ์
ตัวอย่าง
ได้รับมอบหมายให้องค์ประกอบปุ่มเหตุการณ์ onclick:
ลอง»
ในตัวอย่างข้างต้นฟังก์ชั่นที่มีชื่อว่า displayDate จะดำเนินการเมื่อมีการคลิกปุ่ม
ใช้ HTML DOM ที่จะกำหนดเหตุการณ์
HTML DOM ช่วยให้คุณใช้งาน JavaScript เพื่อกำหนดกิจกรรมเพื่อองค์ประกอบ HTML:
ตัวอย่าง
ได้รับมอบหมายให้องค์ประกอบปุ่มเหตุการณ์ onclick:
. document.getElementById ( "myBtn") onclick = function () {displayDate ()};
</ script>
ลอง»
ในตัวอย่างข้างต้นฟังก์ชั่นที่ได้รับมอบหมายให้เป็น id = myButn "องค์ประกอบ HTML ชื่อ displayDate
คลิกที่ปุ่มเมื่อฟังก์ชัน JavaScript จะถูกดำเนินการ
onload และเหตุการณ์ onunload
onload และ onunload เหตุการณ์จะถูกเรียกเมื่อผู้ใช้เข้าหรือออกจากหน้า
เหตุการณ์ onload สามารถใช้เบราว์เซอร์ชนิดและรุ่นของเบราว์เซอร์ของผู้เข้าชมมีการตรวจพบและอยู่บนพื้นฐานของข้อมูลนี้ในการโหลดรุ่นที่ถูกต้องของหน้า
onload และเหตุการณ์ onunload สามารถนำมาใช้ในการจัดการคุกกี้
onchange เหตุการณ์
เหตุการณ์การตรวจสอบช่องใส่ onChange มักจะมารวมกันเพื่อใช้
นี่คือตัวอย่างของวิธีการใช้ onChange ๆ เมื่อผู้ใช้มีการเปลี่ยนแปลงเนื้อหาของช่องใส่ที่เรียกตัวพิมพ์ใหญ่ () ฟังก์ชัน
onmouseover และ MV โดนเหตุการณ์
onmouseover และ MV โดนเหตุการณ์สามารถนำมาใช้ในการเรียกฟังก์ชั่นเมื่อย้ายเมาส์ของผู้ใช้ไปยังด้านบนขององค์ประกอบ HTML หรือองค์ประกอบออก
onmousedown, onmouseup และเหตุการณ์ onclick
onmousedown, onmouseup และ onclick เป็นการทุกส่วนของเหตุการณ์คลิกเมาส์ ครั้งแรกเมื่อคุณคลิกเมาส์ปุ่มทริกเกอร์ onmousedown เหตุการณ์เมื่อปุ่มเมาส์จะถูกปล่อยออกมาก็จะเรียก onmouseup เหตุการณ์และในที่สุดเมื่อเสร็จสิ้นการคลิกเมาส์ก็จะเรียกเหตุการณ์ onclick
ตัวอย่าง
ที่เรียบง่ายเช่น onmousedown-onmouseup:
ตัวอย่างเพิ่มเติม
onmousedown และ onmouseup
เมื่อผู้ใช้กดปุ่มเมาส์ทดแทนของภาพ
onload
เมื่อหน้าจะเสร็จสิ้นการโหลด, แสดงกล่องข้อความ
onfocus
เมื่อข้อมูลที่นำเข้ามีโฟกัสเปลี่ยนสีพื้นหลัง
เหตุการณ์ของเมาส์
เมื่อตัวชี้ย้ายมากกว่าองค์ประกอบเปลี่ยนสีเมื่อย้ายตัวชี้ออกจากข้อความสีของมันจะมีการเปลี่ยนแปลงอีกครั้ง