คู่มือนี้จะแสดงให้เห็นถึงวัตถุประสงค์และการทำงานของเหตุการณ์ “onchange” ใน JavaScript
จะใช้เหตุการณ์ 'onchange' ใน JavaScript ได้อย่างไร
“ ในการเปลี่ยนแปลง ” เหตุการณ์เปิดใช้งานเมื่อค่าขององค์ประกอบ HTML ที่ระบุมีการเปลี่ยนแปลง เมื่อเหตุการณ์นี้ทริกเกอร์ ฟังก์ชัน JavaScript ที่เกี่ยวข้องจะดำเนินการเพื่อทำงานเฉพาะ
ไวยากรณ์
วัตถุ. ในการเปลี่ยนแปลง = การทำงาน ( ) { มายสคริปต์ } ;
ในไวยากรณ์ข้างต้น:
- องค์ประกอบ: หมายถึงองค์ประกอบ HTML เฉพาะ
- การทำงาน(): มันแสดงถึงฟังก์ชันที่กำหนดไว้ซึ่งจะถูกเรียกใช้เมื่อทริกเกอร์เหตุการณ์
- มายสคริปต์: อ้างถึงข้อกำหนดฟังก์ชัน JavaScript เพื่อดำเนินการเฉพาะเมื่อเหตุการณ์ 'onchange' เกิดขึ้น
ไวยากรณ์ (ด้วยวิธี “addEventListener()”)
วัตถุ. addEventListener ( 'เปลี่ยน' , มายสคริปต์ ) ;
ในไวยากรณ์ข้างต้น ' addEventListener() ” วิธีการใช้ “ ในการเปลี่ยนแปลง ” เหตุการณ์เพื่อเรียกใช้ฟังก์ชัน JavaScript สำหรับการทำงานต่างๆ
ตัวอย่างที่ 1: การใช้เหตุการณ์ “onchange” เพื่อแสดงค่าที่เลือกโดยใช้ไวยากรณ์พื้นฐาน
ในสถานการณ์สมมตินี้ เหตุการณ์ 'onchange' จะเชื่อมโยงกับรายการตัวเลือกเพื่อแสดงค่าตัวเลือกที่เปลี่ยนแปลงและเรียกใช้ฟังก์ชัน JavaScript ที่สอดคล้องกัน
รหัส HTML
ดูโค้ด HTML ต่อไปนี้:
< ชั่วโมง2 > ในการเปลี่ยนแปลง เหตุการณ์ ในจาวาสคริปต์ ชั่วโมง2 >< หน้า > เลือกภาษาอื่นจากรายการ หน้า >
< เลือกรหัส = 'การสาธิต' ในการเปลี่ยนแปลง = 'ตัวอย่าง()' >
< ค่าตัวเลือก = 'เอชทีเอ็มแอล' > HTML ตัวเลือก >
< ค่าตัวเลือก = 'ซีเอสเอส' > ซีเอสเอส ตัวเลือก >
< ค่าตัวเลือก = 'จาวาสคริปต์' > จาวาสคริปต์ ตัวเลือก >
เลือก >
< รหัสพี = 'พี 1' > หน้า >
ในรหัสด้านบน:
- ขั้นแรก กำหนดหัวข้อย่อยโดยใช้ปุ่ม “ ” แท็ก
- ถัดไป เพิ่มย่อหน้าด้วยคำสั่งที่ระบุ
- หลังจากนั้น “ <เลือก> ” แท็กสร้างรายการแบบเลื่อนลงด้วยรหัสที่กำหนด “ การสาธิต ' และ ' ในการเปลี่ยนแปลง ” เหตุการณ์เปลี่ยนเส้นทางไปยังฟังก์ชัน “ ตัวอย่าง() ” ตามลำดับ
- ในเนื้อหาของแท็ก “
- สุดท้าย ย่อหน้าว่างจะถูกสร้างขึ้นด้วย id “ P1 ” เพื่อแสดงค่าที่เลือก/เปลี่ยนแปลงจากรายการตัวเลือก
รหัสจาวาสคริปต์
ตอนนี้ ภาพรวมของรหัส JavaScript ต่อไปนี้:
< สคริปต์ >ตัวอย่างฟังก์ชั่น ( ) {
ที่ไหน = เอกสาร. getElementById ( 'การสาธิต' ) . ค่า ;
เอกสาร. getElementById ( 'พี 1' ) . HTML ภายใน = 'ตัวเลือกที่เลือกคือ: ' + ที ;
}
สคริปต์ >
ในบล็อกรหัสด้านบน:
- ก่อนอื่น ให้ประกาศฟังก์ชั่นชื่อ “ ตัวอย่าง() '.
- ในคำจำกัดความให้ใช้ ' getElementById() ” วิธีการเข้าถึงค่าของตัวเลือกที่เลือกจากรายการตัวเลือกผ่านทาง “ ค่า ' คุณสมบัติ.
- สุดท้าย แสดงค่าโดยใช้เครื่องหมาย “ HTML ภายใน ' คุณสมบัติ.
เอาต์พุต
ดังที่เห็นในผลลัพธ์ เมื่อเลือกตัวเลือกจากเมนูแบบเลื่อนลง เหตุการณ์ 'onchange' จะทริกเกอร์และเรียกใช้ฟังก์ชันที่เกี่ยวข้อง
ตัวอย่างที่ 2: การใช้เหตุการณ์ “onchange” เพื่อเปลี่ยนข้อความฟิลด์อินพุตเป็นตัวพิมพ์ใหญ่โดยใช้ไวยากรณ์เมธอด “addEventListener()”
ตัวอย่างนี้อธิบายเหตุการณ์ 'onchange' ที่ทำงานโดยเปลี่ยนฟิลด์ข้อความอินพุตเป็น 'ตัวพิมพ์ใหญ่' ด้วยความช่วยเหลือของเมธอด 'addEventListener()'
รหัส HTML
ขั้นแรก ให้อ่านโค้ด HTML ด้านล่าง:
< ชั่วโมง2 > ในการเปลี่ยนแปลง เหตุการณ์ ในจาวาสคริปต์ ชั่วโมง2 >ชื่อ : < ประเภทอินพุต = 'ข้อความ' รหัส = 'การสาธิต' >
< ปุ่ม > ส่ง ปุ่ม >
ในโค้ด HTML ด้านบน:
- กำหนดหัวข้อย่อยของระดับ 2 ผ่าน “ ” แท็ก
- ถัดไป เพิ่ม “ <อินพุต> ” ฟิลด์ตามป้ายกำกับ “ ชื่อ ', ชนิดของเนื้อหา ' ข้อความ ” และรหัสที่เกี่ยวข้อง “ การสาธิต ” ตามลำดับ
- สุดท้าย รวมปุ่มโดยใช้ ' <ปุ่ม> ” แท็ก
รหัสจาวาสคริปต์
ต่อไป ดูโค้ด JavaScript ต่อไปนี้:
< สคริปต์ >เอกสาร. getElementById ( 'การสาธิต' ) . addEventListener ( 'เปลี่ยน' ,ตัวอย่าง ) ;
ตัวอย่างฟังก์ชั่น ( ) {
ที่ไหน = เอกสาร. getElementById ( 'การสาธิต' ) ;
ที. ค่า = ที. ค่า . ถึงตัวพิมพ์ใหญ่ ( ) ;
}
สคริปต์ >
ในบล็อกรหัสนี้:
- ประการแรก “ document.getElementById() ” วิธีการใช้ “ เปลี่ยน ” เหตุการณ์ที่จะส่งผลให้ค่าของฟิลด์ข้อความอินพุตเปลี่ยนโดยมี id “ การสาธิต ” เมื่อคลิกปุ่ม
- ถัดไป ฟังก์ชัน 'Sample()' ถูกกำหนดโดยใช้เมธอด 'document.getElementById()' เพื่อเข้าถึงฟิลด์ข้อความอินพุต 'สาธิต' จากนั้นเปลี่ยนค่าเป็น 'ตัวพิมพ์ใหญ่' ผ่าน ' ตัวพิมพ์ใหญ่() ' วิธี.
เอาต์พุต
ดังที่เห็น ข้อความอินพุตถูกแปลงเป็นตัวพิมพ์ใหญ่เมื่อคลิกปุ่ม
บทสรุป
JavaScript นำเสนอ ' ในการเปลี่ยนแปลง ” เหตุการณ์ที่เรียกใช้ทันทีที่สถานะของค่าขององค์ประกอบเฉพาะเปลี่ยนไป มันคล้ายกับ “ บนอินพุต ” เหตุการณ์ แต่ “oninput” เกิดขึ้นทันทีเมื่อค่าเปลี่ยนแปลง ในขณะที่เหตุการณ์ “onchange” ทริกเกอร์เมื่อค่าของเหตุการณ์สูญเสียโฟกัส คู่มือนี้แสดงวัตถุประสงค์ การทำงาน และการใช้งานเหตุการณ์ “onchange” ใน JavaScript