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

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

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

HTML DOM JavaScript, HTML มีความสามารถในการตอบสนองต่อเหตุการณ์ที่เกิดขึ้น

ตัวอย่าง

เมาส์กว่าฉัน
คลิก Me

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

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

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

onclick= JavaScript

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

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

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

ตัวอย่าง

<! DOCTYPE html>
<html>
<body>
<h1 onclick = "this.innerHTML = 'อ๊ะ!'"> คลิกที่ข้อความ! </ h1>
</ body>
</ html>

ลอง»

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

ตัวอย่าง

<! DOCTYPE html>
<html>
<head>
<script>
ฟังก์ชั่น changetext (ID)
{
id.innerHTML = "อ๊ะ!";
}
</ script>
</ head>
<body>
<h1 onclick = "changetext (นี้)"> คลิกที่ข้อความ! </ h1>
</ body>
</ html>

ลอง»

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

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

ตัวอย่าง

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

<ปุ่ม onclick = "displayDate () "> คลิกที่นี่ </ ปุ่ม>

ลอง»

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

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

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

ตัวอย่าง

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

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

ลอง»

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

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

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

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

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

onload และเหตุการณ์ onunload สามารถนำมาใช้ในการจัดการคุกกี้

ตัวอย่าง

<body onload = "checkCookies () ">

ลอง»

onchange เหตุการณ์

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

นี่คือตัวอย่างของวิธีการใช้ onChange ๆ เมื่อผู้ใช้มีการเปลี่ยนแปลงเนื้อหาของช่องใส่ที่เรียกตัวพิมพ์ใหญ่ () ฟังก์ชัน

ตัวอย่าง

<ชนิดของการป้อนข้อมูล = "text" id = "fname" onChange = "พิมพ์ใหญ่ ()">

ลอง»

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

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

ตัวอย่าง

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

เมาส์กว่าฉัน

ลอง»

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

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

ตัวอย่าง

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

ขอขอบคุณคุณ

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

onmousedown และ onmouseup
เมื่อผู้ใช้กดปุ่มเมาส์ทดแทนของภาพ

onload
เมื่อหน้าจะเสร็จสิ้นการโหลด, แสดงกล่องข้อความ

onfocus
เมื่อข้อมูลที่นำเข้ามีโฟกัสเปลี่ยนสีพื้นหลัง

เหตุการณ์ของเมาส์
เมื่อตัวชี้ย้ายมากกว่าองค์ประกอบเปลี่ยนสีเมื่อย้ายตัวชี้ออกจากข้อความสีของมันจะมีการเปลี่ยนแปลงอีกครั้ง

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

Contact US

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