จะจำลองการคลิกด้วย JavaScript ได้อย่างไร
สามารถใช้วิธีต่อไปนี้เพื่อใช้การจำลองการคลิกใน JavaScript:
วิธีที่ 1: จำลองการคลิกด้วย JavaScript โดยใช้เหตุการณ์ onclick
หนึ่ง ' เมื่อคลิก ” เหตุการณ์เกิดขึ้นเมื่อกดปุ่ม วิธีการนี้สามารถนำไปใช้เพื่อเรียกใช้ฟังก์ชันเมื่อคลิกปุ่มและเพิ่ม ' จำนวนคลิก ” ทุกครั้งที่คลิกปุ่ม
หมายเหตุด้านข้าง: หนึ่ง ' เมื่อคลิก ” เหตุการณ์สามารถนำไปใช้ได้โดยแนบกับฟังก์ชันเฉพาะ
ตัวอย่าง
ทำตามข้อมูลโค้ดต่อไปนี้:
< ศูนย์กลาง >
< สไตล์ h3 = 'สีพื้นหลัง: สีฟ้าอ่อน;' > คลิกจำลอง < ช่วง ระดับ = 'นับ' > ช่วง > ครั้ง h3 >
< รหัสปุ่ม = 'btn1' เมื่อคลิก = 'นับคลิก()' > คลิกฉัน ! ปุ่ม >
ศูนย์กลาง >
- รวมหัวข้อที่ระบุพร้อมกับ ' ” แท็กเพื่อเพิ่ม “ นับ ” ของการคลิก
- ในขั้นตอนถัดไป สร้างปุ่มพร้อมแนบ “ เมื่อคลิก ” เหตุการณ์เปลี่ยนเส้นทางไปยังฟังก์ชั่น countClick() ซึ่งจะเข้าถึงได้เมื่อคลิกปุ่ม
ตอนนี้ มาดูบรรทัดรหัส JavaScript ต่อไปนี้:
< สคริปต์ >
ปล่อยให้คลิก = 0 ;
จำนวนฟังก์ชันคลิก ( ) {
คลิก = คลิก + 1 ;
เอกสาร. ตัวเลือกแบบสอบถาม ( '.นับ' ) . ข้อความเนื้อหา = คลิก ;
}
สคริปต์ >
ในส่วน js ด้านบนของรหัส:
- ที่นี่ ก่อนอื่นให้เริ่มต้นการคลิกด้วย “ 0 '.
- หลังจากนั้นให้ประกาศฟังก์ชั่นชื่อ “ นับคลิก() '. ในคำจำกัดความ ให้เพิ่มค่าเริ่มต้น “ คลิก ' กับ ' 1 '. ซึ่งจะส่งผลให้มีการเพิ่มจำนวนทุกครั้งที่คลิกปุ่ม
- สุดท้าย เข้าไปที่ “ ช่วง ” องค์ประกอบโดยใช้ “ document.querySelector() ' กระบวนการ. นอกจากนี้ ให้ใช้ “ ข้อความเนื้อหา คุณสมบัติ ” เพื่อจัดสรรจำนวนคลิกที่เพิ่มขึ้นซึ่งกล่าวถึงก่อนหน้าให้กับองค์ประกอบช่วง
ผลลัพธ์จะเป็นดังนี้:
การทำงานของตัวจับเวลาที่เพิ่มขึ้นเมื่อคลิกแต่ละครั้งสามารถสังเกตได้ในเอาต์พุตด้านบน
วิธีที่ 2: จำลองการคลิกด้วย JavaScript ผ่านเมธอด addEventListener()
“ addEventListener() ” วิธีการจัดสรรตัวจัดการเหตุการณ์ให้กับองค์ประกอบ วิธีนี้สามารถนำไปใช้ได้โดยแนบเหตุการณ์เฉพาะกับองค์ประกอบและแจ้งเตือนผู้ใช้เมื่อมีการทริกเกอร์ของเหตุการณ์
ไวยากรณ์
ธาตุ. addEventListener ( เหตุการณ์, หน้าที่ )ในไวยากรณ์ที่กำหนด:
- “ เหตุการณ์ ” หมายถึงชื่อเหตุการณ์
- “ การทำงาน ” ชี้ไปที่ฟังก์ชันที่จะดำเนินการเมื่อเหตุการณ์เกิดขึ้น
ตัวอย่าง
การสาธิตที่ระบุด้านล่างอธิบายแนวคิดที่ระบุไว้:
< ศูนย์กลาง >< ร่างกาย >< แท็ก = '#' รหัส = 'ลิงค์' > คลิกที่ลิงค์ เอ >
ร่างกาย > ศูนย์กลาง >
< สคริปต์ >
เป็นแพะ = เอกสาร. getElementById ( 'ลิงค์' ) ;
รับ. addEventListener ( 'คลิก' , ( ) => เตือน ( 'คลิกจำลอง!' ) )
สคริปต์ >
ในรหัสด้านบน:
- ประการแรก ระบุ “ สมอ ” แท็กเพื่อรวมลิงค์ที่ระบุ
- ในส่วน JavaScript ของโค้ด ให้เข้าถึงลิงก์ที่สร้างขึ้นโดยใช้ปุ่ม “ document.getElementById() ' กระบวนการ.
- สุดท้าย ใช้ “ addEventListener() ” วิธีการเข้าถึง “ ลิงค์ '. “ คลิก ” แนบเหตุการณ์ในกรณีนี้ซึ่งจะส่งผลให้ผู้ใช้แจ้งเตือนเมื่อคลิกลิงก์ที่สร้างขึ้น
เอาต์พุต
วิธีที่ 3: จำลองการคลิกด้วย JavaScript โดยใช้วิธีคลิก ()
“ คลิก() ” วิธีการทำการจำลองการคลิกเมาส์บนองค์ประกอบ สามารถใช้วิธีนี้เพื่อจำลองการคลิกโดยตรงไปยังปุ่มที่แนบมาตามที่ระบุในชื่อ
ไวยากรณ์
ธาตุ. คลิก ( )ในไวยากรณ์ที่กำหนด:
- “ ธาตุ ” ชี้ไปที่องค์ประกอบที่จะดำเนินการคลิก
ตัวอย่าง
ข้อมูลโค้ดต่อไปนี้อธิบายแนวคิดที่ระบุ:
< ศูนย์กลาง >< ร่างกาย >< h3 > คุณพบ นี้ หน้ามีประโยชน์ ? h3 >
< ปุ่มบนคลิก = 'จำลองคลิก ()' รหัส = 'จำลอง' > ใช่ ปุ่ม >
< ปุ่มบนคลิก = 'จำลองคลิก ()' รหัส = 'จำลอง' > ไม่ ปุ่ม >
< รหัส h3 = 'ศีรษะ' สไตล์ = 'สีพื้นหลัง: เขียวอ่อน' > h3 >
ร่างกาย > ศูนย์กลาง >
- ขั้นแรก ให้รวมหัวเรื่องที่ระบุไว้ใน “ <ศูนย์> ” แท็ก
- หลังจากนั้นให้สร้างปุ่มที่แตกต่างกันสองปุ่มด้วยรหัสที่ระบุ
- นอกจากนี้ ให้แนบ “ เมื่อคลิก ” เหตุการณ์ที่มีทั้งการเรียกใช้ฟังก์ชัน simulatorClick()
- ในขั้นตอนถัดไป ให้รวมหัวข้ออื่นที่ระบุ “ รหัส ” เพื่อแจ้งให้ผู้ใช้ทราบทันทีที่ “ คลิก ” เป็นการจำลอง
ตอนนี้ให้อ่านบรรทัด JavaScript ที่ระบุด้านล่าง:
< สคริปต์ >ฟังก์ชันจำลองคลิก ( ) {
เอกสาร. getElementById ( 'จำลอง' ) . คลิก ( )
ปล่อยให้ได้รับ = เอกสาร. getElementById ( 'ศีรษะ' )
รับ. ข้อความภายใน = 'คลิกจำลอง!'
}
สคริปต์ >
- กำหนดฟังก์ชัน “ จำลองคลิก() '.
- ที่นี่ เข้าถึงปุ่มที่สร้างขึ้นโดยใช้ปุ่ม “ document.getElementById() ” วิธีการและใช้ “ คลิก() ” วิธีการเหล่านั้น
- ตอนนี้ ในทำนองเดียวกัน เข้าถึงหัวข้อที่จัดสรรและใช้ ' ข้อความภายใน ” เพื่อแสดงข้อความที่ระบุเป็นหัวข้อตามการคลิกจำลอง
เอาท์พุต
ในผลลัพธ์ข้างต้น เห็นได้ชัดว่าปุ่มที่สร้างขึ้นทั้งสองจำลองการคลิก
บล็อกนี้สาธิตวิธีการใช้การจำลองการคลิกโดยใช้ JavaScript
บทสรุป
หนึ่ง ' เมื่อคลิก ” เหตุการณ์ “ addEventListener() ” วิธีหรือ “ คลิก() สามารถใช้เมธอด ” เพื่อจำลองการคลิกด้วย JavaScript หนึ่ง ' เมื่อคลิก ” สามารถใช้เหตุการณ์เพื่อจำลองการคลิกทุกครั้งที่มีการคลิกปุ่มในรูปแบบของตัวนับ “ addEventListener() ” สามารถใช้เพื่อแนบเหตุการณ์กับลิงก์และแจ้งให้ผู้ใช้ทราบเมื่อมีการคลิกจำลอง “ คลิก() สามารถใช้เมธอด ” กับปุ่มที่สร้างขึ้นและดำเนินการฟังก์ชันที่จำเป็นสำหรับแต่ละปุ่ม บทความนี้จะอธิบายวิธีการใช้การจำลองการคลิกใน JavaScript