ล่าสุดการพัฒนาเว็บบทเรียน
×

JS เกี่ยวกับการสอน

JS บ้าน JS บทนำ JS สถานที่ที่จะ JS ส่งออก JS วากยสัมพันธ์ JS งบ JS ความคิดเห็น JS ตัวแปร JS ผู้ประกอบการ JS คณิตศาสตร์ JS การมอบหมาย JS ชนิดข้อมูล JS ฟังก์ชั่น JS วัตถุ JS ขอบเขต JS เหตุการณ์ JS เงื่อนไข JS วิธีสตริง JS เบอร์ JS วิธีการจำนวน JS คณิตศาสตร์ JS วันที่ JS รูปแบบวันที่ JS วันวิธีการ JS แถว JS วิธีการอาร์เรย์ JS booleans JS เปรียบเทียบ JS เงื่อนไข JS สวิตซ์ JS ห่วง For JS ในขณะที่ห่วง JS หยุด JS ประเภทการแปลง JS นิพจน์ทั่วไป JS ข้อผิดพลาด JS แก้จุดบกพร่อง JS hoisting JS โหมดที่เข้มงวด JS คู่มือสไตล์ JS ปฏิบัติที่ดีที่สุด JS ข้อผิดพลาด JS ประสิทธิภาพ JS คำสงวน JS JSON

JS ฟอร์ม

แบบฟอร์มการตรวจสอบ รูปแบบ API

JS วัตถุ

นิยามวัตถุ คุณสมบัติของวัตถุ วิธีการของวัตถุ ต้นแบบวัตถุ

JS ฟังก์ชั่น

นิยามฟังก์ชั่น ค่าฟังก์ชัน ฟังก์ชั่นการภาวนา ปิดฟังก์ชั่น

JS HTML DOM

DOM แนะนำ DOM วิธีการ DOM เอกสาร DOM องค์ประกอบ DOM HTML DOM CSS DOM ภาพเคลื่อนไหว DOM เหตุการณ์ DOM EventListener DOM การเดินเรือ DOM โหนด DOM Nodelist

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS ตัวอย่าง

JS ตัวอย่าง JS HTML DOM JS HTML อินพุต JS HTML วัตถุ JS HTML เหตุการณ์ JS เบราว์เซอร์ JS ทดสอบ JS สรุป

JS คู่มืออ้างอิง

JavaScript วัตถุ HTML DOM วัตถุ


 

JavaScriptเหตุการณ์

❮ก่อนหน้า ถัดไปบท❯

เหตุการณ์ HTML คือ "สิ่ง" ที่เกิดขึ้นกับองค์ประกอบ HTML

เมื่อใช้ JavaScript ในหน้าเว็บ HTML, JavaScript สามารถ "ตอบสนอง" ในเหตุการณ์เหล่านี้

เหตุการณ์ HTML

เหตุการณ์ HTML สามารถเป็นสิ่งที่เบราว์เซอร์ไม่หรือบางสิ่งบางอย่างที่ผู้ใช้ไม่

นี่คือตัวอย่างบางส่วนของเหตุการณ์ HTML คือ:

  • หน้าเว็บ HTML ได้เสร็จสิ้นการโหลด
  • สนามอินพุต HTML ก็เปลี่ยน
  • ปุ่ม HTML ถูกคลิก

บ่อยครั้งที่เมื่อมีเหตุการณ์เกิดขึ้นคุณอาจต้องการที่จะทำอะไรบางอย่าง

JavaScript ช่วยให้คุณสามารถรันโค้ดเมื่อมีเหตุการณ์มีการตรวจพบ

HTML ช่วยจัดการเหตุการณ์คุณลักษณะที่มีรหัส JavaScript, ที่จะเพิ่มองค์ประกอบ HTML

ด้วยคำพูดเดียว:

< some-HTML-element some-event = ' some JavaScript ' >

ด้วยคำพูดสอง:

< some-HTML-element some-event = " some JavaScript " >

ในตัวอย่างต่อไปนี้เป็น onclick แอตทริบิวต์ (มีรหัส) จะถูกเพิ่มองค์ประกอบที่ปุ่ม

ตัวอย่าง

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
ลองตัวเอง»

ในตัวอย่างข้างต้น, รหัส JavaScript การเปลี่ยนแปลงเนื้อหาขององค์ประกอบที่มี id="demo"

ในตัวอย่างต่อไปรหัสการเปลี่ยนแปลงเนื้อหาขององค์ประกอบของตัวเอง (โดยใช้ this .innerHTML ):

ตัวอย่าง

<button onclick="this.innerHTML=Date()">The time is?</button>
ลองตัวเอง»

โค้ด JavaScript มักจะเป็นหลายสายยาว มันเป็นเรื่องธรรมดามากขึ้นเพื่อดูคุณลักษณะเหตุการณ์การเรียกฟังก์ชั่น:

ตัวอย่าง

<button onclick="displayDate()">The time is?</button>
ลองตัวเอง»

เหตุการณ์ที่พบบ่อย HTML

นี่คือรายการของเหตุการณ์บาง HTML ทั่วไป:

เหตุการณ์ ลักษณะ
onchange องค์ประกอบ HTML ได้รับการเปลี่ยนแปลง
onclick ผู้ใช้คลิกองค์ประกอบ HTML
onmouseover ผู้ใช้เลื่อนเมาส์ไปบนองค์ประกอบ HTML
onmouseout ผู้ใช้เลื่อนเมาส์ออกไปจากองค์ประกอบ HTML
onkeydown ผลักดันให้ผู้ใช้คีย์แป้นพิมพ์
onload เบราว์เซอร์ได้เสร็จสิ้นการโหลดหน้าเว็บ

รายการมีความยาวมาก: w3ii JavaScript อ้างอิง HTML DOM เหตุการณ์

อะไร JavaScript จะทำอย่างไร

จัดการเหตุการณ์สามารถนำมาใช้ในการจัดการและตรวจสอบผู้ใช้ป้อนกระทำของผู้ใช้และการกระทำของเบราว์เซอร์:

  • สิ่งที่ควรจะทำทุกครั้งที่มีการโหลดหน้าเว็บ
  • สิ่งที่ควรจะทำเมื่อหน้าจะปิด
  • การกระทำที่ควรจะดำเนินการเมื่อผู้ใช้คลิกปุ่ม
  • เนื้อหาที่ควรได้รับการยืนยันเมื่อข้อมูลที่เป็นปัจจัยการผลิตของผู้ใช้
  • และอื่น ๆ ...

วิธีการที่แตกต่างกันจำนวนมากสามารถนำมาใช้เพื่อให้การทำงานของ JavaScript กับเหตุการณ์:

  • แอตทริบิวต์เหตุการณ์ HTML สามารถรันโค้ด JavaScript โดยตรง
  • แอตทริบิวต์เหตุการณ์ HTML สามารถเรียกฟังก์ชัน JavaScript
  • คุณสามารถกำหนดฟังก์ชั่นการจัดการเหตุการณ์ของคุณเองเพื่อ HTML องค์ประกอบ
  • คุณสามารถป้องกันไม่ให้เหตุการณ์ที่เกิดขึ้นจากการถูกส่งหรือได้รับการจัดการ
  • และอื่น ๆ ...

คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับเหตุการณ์และการจัดการเหตุการณ์ใน HTML DOM บท

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »


❮ก่อนหน้า ถัดไปบท❯