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