ฟังก์ชัน OnClick ใน JQuery อธิบายด้วยตัวอย่าง
เผยแพร่แล้ว: 2021-06-18หนึ่งในไลบรารี่ที่รวดเร็ว ขนาดเล็ก และเต็มไปด้วยคุณสมบัติมากมายใน JavaScript คือ jQuery jQuery ใช้สำหรับสร้างเอกสาร HTML การจัดการเหตุการณ์ การข้ามผ่าน และการจัดการ ฯลฯ
เมื่อใดก็ตามที่องค์ประกอบ HTML ถูกคลิก จะมีเหตุการณ์การคลิก jQuery เกิดขึ้น ในการทริกเกอร์ ฟังก์ชัน onclick ใน jQuery จะใช้เมธอด click() ตัวอย่างเช่น เมื่อคลิกย่อหน้าในเอกสาร เหตุการณ์การคลิกจะถูกทริกเกอร์โดยวิธี $(“p”).click() ผู้ใช้สามารถแนบฟังก์ชันกับวิธีการคลิกเมื่อใดก็ตามที่เกิดเหตุการณ์คลิกเพื่อเรียกใช้ฟังก์ชัน ดังนั้นโค้ดบางส่วนจะถูกเรียกใช้งานเมื่อใดก็ตามที่มีเหตุการณ์ click() เกิดขึ้น
การคลิกเมาส์ถูกจำลองโดยใช้เมธอด HTMLElement.click()
ฟังก์ชัน Click() เป็นฟังก์ชันที่สร้างขึ้นใน jQuery ที่เริ่มเหตุการณ์การคลิก เมื่อใดก็ตามที่มีการคลิกองค์ประกอบที่เกี่ยวข้อง เหตุการณ์จะเริ่มต้นโดยเมธอด click() จากนั้น เหตุการณ์ ของเขาจะทำให้เกิดเหตุการณ์การคลิกขององค์ประกอบที่อยู่สูงขึ้นไปในโครงสร้างเอกสาร (หรือห่วงโซ่เหตุการณ์)
ตามชื่อที่แนะนำ มันเป็นเพียงการกดและปล่อยปุ่มเมาส์โดยผู้ใช้เหนือองค์ประกอบ
ตัวจัดการเหตุการณ์อย่างน้อยหนึ่งตัวแนบกับองค์ประกอบที่เลือกผ่านเมธอด on() เมื่อคลิกที่องค์ประกอบ จะเกิดเหตุการณ์การคลิก () เมธอด click() จะทำงานเมื่อมีเหตุการณ์ click() เกิดขึ้น ฟังก์ชั่นแนบมากับเมธอด click() และดำเนินการ มีการใช้เมธอด click() กับเหตุการณ์อื่นของ jQuery
ดังนั้น .click() จะโยงตัวจัดการเหตุการณ์กับเหตุการณ์ JavaScript “คลิก” หรือทริกเกอร์เหตุการณ์บนองค์ประกอบ รูปแบบของ JavaScript onclick method คือ:
- .click( ตัวจัดการ )
- .click( [eventData ], ตัวจัดการ )
- .คลิก().
รูปแบบแรกและรูปแบบที่สองคือรูปแบบย่อสำหรับ .on ( “คลิก” ตัวจัดการ ) และทางลัดสำหรับ .trigger ( “คลิก”) ในรูปแบบล่าสุด
เมื่อใดก็ตามที่ตัวชี้เมาส์อยู่เหนือองค์ประกอบและกดปุ่มและปล่อย เหตุการณ์ click() จะถูกส่งไปยังองค์ประกอบนั้น เหตุการณ์สามารถรับได้โดยองค์ประกอบใดๆ ของ HTML
นอกจากนี้ยังสามารถทริกเกอร์เหตุการณ์ Click() ได้หากองค์ประกอบอื่นถูกคลิกผ่านรหัสต่อไปนี้
ด้วยรหัสนี้ ข้อความจะได้รับการแจ้งเตือนโดยองค์ประกอบ
จากเหตุการณ์ต่อไปนี้ จะทริกเกอร์เหตุการณ์ click() เท่านั้น
- เมื่อตัวชี้ของเมาส์อยู่ในองค์ประกอบและปุ่มของเมาส์ถูกกดลง
- เมื่อตัวชี้ของเมาส์อยู่ในองค์ประกอบและปล่อยปุ่มของเมาส์
ก่อนดำเนินการ เหตุการณ์ที่กล่าวถึงข้างต้นมักจะเป็นลำดับที่ต้องการ มิฉะนั้น เหตุการณ์ที่เหมาะสมอื่น ๆ คือเหตุการณ์เลื่อนเมาส์หรือเลื่อนเมาส์
เนื่องจากวิธีการ .click() เป็นทางลัดสำหรับ .on( “click”, handler ) จึงมีความเป็นไปได้ในการแยกออกโดยใช้ .off( “click” )
การใช้งาน
มีอยู่สองวิธีที่สามารถใช้เรียกเมธอด click() ได้:
- ด้วยอาร์กิวเมนต์ฟังก์ชันที่กำหนด
- โดยไม่มีข้อโต้แย้ง given
ฟังก์ชัน onclick ใน jQuery สามารถใช้ในองค์ประกอบของ HTML เช่น div, ย่อหน้า, ไฮเปอร์ลิงก์ ฯลฯ เพื่อให้งานที่ต้องการสำเร็จ การคลิกคือเหตุการณ์ของเมาส์ที่เกิดขึ้นจากการกดทับของปุ่มบนเมาส์ อย่างไรก็ตาม เหตุการณ์จะเกิดขึ้นหากตัวชี้ในเมาส์อยู่ภายในองค์ประกอบ
ไวยากรณ์:
$(ตัวเลือก).คลิก() ; -> ใช้สำหรับทริกเกอร์เหตุการณ์การคลิกสำหรับองค์ประกอบที่เลือก
$(ตัวเลือก).คลิก(ฟังก์ชัน); -> ใช้สำหรับแนบฟังก์ชันกับเหตุการณ์การคลิก
- พารามิเตอร์ทางเลือกที่ใช้คือ "ฟังก์ชัน" ซึ่งใช้สำหรับดำเนินการเมื่อเกิดเหตุการณ์คลิก
- ค่าที่ส่งกลับ: องค์ประกอบที่เลือกจะถูกส่งคืนซึ่งระบุด้วยฟังก์ชันที่จะดำเนินการ
สารบัญ
การใช้งานเมธอด click()
1. เมื่อให้ฟังก์ชันอาร์กิวเมนต์
ในการใช้งานประเภทนี้ ฟังก์ชัน จะถูกใช้เป็นอินพุตและดำเนินการทุกครั้งที่มีการเรียกใช้เมธอด click()
- การเขียนโค้ดอยู่ระหว่าง แท็ก สคริปต์ และภายใน เนื้อหา HTML ของโค้ด
- การเรียกใช้ ฟังก์ชัน จะทำเป็นแอตทริบิวต์สไตล์ h1
- อาร์กิวเมนต์ถูกประกาศด้วย ฟังก์ชัน และถือเป็นฟังก์ชันแยกต่างหาก
- วิธีการ สลับ ถูกนำไปใช้กับวัตถุโดยใช้ โอเปอเรเตอร์ นี้ ที่มีการหน่วงเวลา 1000ms
- ตัวอย่างของวิธีการนำไปใช้งานด้วยอาร์กิวเมนต์ของฟังก์ชันที่ระบุแสดงอยู่ด้านล่าง
ผลลัพธ์ของโค้ดจะเป็น "การคลิกฉันจะสลับข้อความ!"
2. เมื่อไม่มีการโต้แย้งใดๆ
เมธอด javascript onclick เรียก ใช้เหตุการณ์ ของ องค์ประกอบถูกกำหนดให้กับเมธอดแล้ว ดังนั้นองค์ประกอบสามารถเรียกเหตุการณ์ onclick ขององค์ประกอบอื่นแยกจากกัน สามารถทำได้โดยทำตามขั้นตอนต่อไปนี้:
- ต้องมีการประกาศอ็อบเจ็กต์ก่อนด้วยแอตทริบิวต์ของสไตล์เฉพาะที่สามารถคลิกได้ ต้องประกาศ การ กระทำ onclick สำหรับวัตถุ
- บล็อกของ สคริปต์ จะต้องสร้างใน เนื้อหา ของโค้ดโดยจะ มีการระบุแหล่งที่มาของเมธอด click() กับรูปแบบของสไตล์ที่แตกต่าง กัน p
- วิธีการ h1 onclick ที่กำหนดไว้แล้วจะถูกเรียกในการเรียกฟังก์ชัน
- จากนั้นเรียกใช้เมธอด onclick เดียวกันสำหรับแอตทริบิวต์
- ตัวอย่างของโค้ดที่แสดงการใช้งานเมธอด click() โดยไม่มีอาร์กิวเมนต์แสดงอยู่ด้านล่าง
ผลลัพธ์ของรหัสคือ “การคลิกฉันจะเรียกการแจ้งเตือน!”
- สามารถใช้เหตุการณ์จำนวนมากในเมธอด $.on เช่น dblclick, change และอื่นๆ
- การแสดงผลปุ่ม HTML และเพิ่มข้อความในหน้าเมื่อคลิกปุ่ม โดยทั่วไปแล้วเมธอด Click() จะแนบมากับปุ่ม อย่างไรก็ตาม สามารถแนบเมธอดนี้กับองค์ประกอบอื่นๆ ในหน้าเว็บได้
- ปุ่มพื้นฐานจะแสดงด้วยรหัส "btn-primary" ซึ่งอยู่ภายใน <div> ที่มีรหัสของ "main.js"
- ด้วยโค้ดนี้ เนื้อหาใหม่จะแสดงพร้อมกับคลาสของ "เนื้อหาใหม่" ในแท็ก <p> หลังจากคลิกปุ่ม
- jQuery อยู่ในแท็ก <script>
- เมธอด click() แนบมากับ id ของปุ่ม และอาร์กิวเมนต์จะถูกใช้เป็นฟังก์ชันเรียกกลับซึ่งเป็นฟังก์ชันที่ไม่ระบุตัวตน
- สตริง "การคลิกปุ่ม" ถูกส่งกลับโดยฟังก์ชันเรียกกลับ
- ฟังก์ชันที่ไม่มีชื่อเรียกง่ายๆ ว่าเป็นฟังก์ชันที่ไม่ระบุชื่อและใช้เป็นฟังก์ชันเรียกกลับเป็นอาร์กิวเมนต์ของเมธอด สำหรับการสร้างเว็บไซต์และแอปพลิเคชันที่ตอบสนอง ฟังก์ชันที่ไม่ระบุตัวตนและวิธีการโทรกลับจะทำหน้าที่เป็นรากฐานที่สำคัญ
- รหัสจะเริ่มต้นด้วยปุ่มภายใน <div> “หลัก”
- เมื่อปุ่มถูกคลิก ฟังก์ชันเรียกกลับจะถูกเรียกโดยตัวจัดการเหตุการณ์ เนื่องจากเมธอด click() แนบมากับตัวเลือกปุ่ม
- สตริง "ปุ่มที่คลิกปุ่ม" จะปรากฏขึ้น
- โค้ดด้านบนจะแสดงเนื้อหาเพียงครั้งเดียว อย่างไรก็ตาม สำหรับการแสดงสตริงทุกครั้งที่มีการคลิกโค้ด จะใช้ append() แทน HTML()
- มันจะสร้างสตริงสามครั้งเป็นเนื้อหาใหม่ภายในแท็ก <p>
- ฟังก์ชันเรียกกลับจะถูกเรียกทุกครั้งที่มีการคลิกปุ่ม
บทสรุป
มีการกล่าวถึง การทำงานของ ฟังก์ชัน onclick ใน jquery ในบทความพร้อมกับการใช้งาน และตัวอย่าง ด้วยโค้ดเพียงไม่กี่บรรทัด ฟังก์ชันของหน้าเว็บจึงสร้างขึ้นได้โดย ใช้ วิธี JavaScript onclick
หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บและเชี่ยวชาญในด้านอื่นๆ ที่เกี่ยวข้อง คุณสามารถตรวจสอบหลักสูตร " วิทยาศาสตรมหาบัณฑิตสาขาวิทยาการคอมพิวเตอร์ " ที่นำเสนอโดย upGrad ออกแบบมาเป็นพิเศษสำหรับมืออาชีพระดับเริ่มต้น (ทั้งชายและหญิงอายุระหว่าง 21 ถึง 45 ปี) หลักสูตรนี้จะอยู่บนแพลตฟอร์มออนไลน์พร้อมเซสชันสด เพื่อความสะดวกของผู้เดินทางทางไกล ด้วยโครงการและงานที่ได้รับมอบหมายมากกว่า 30+ โครงการ นักเรียนจะได้รับประโยชน์จาก สถานะศิษย์เก่า IIIT-บังกาลอร์และศิษย์เก่า LJMU โปรดติดต่อทีมงานของเราเพื่อขอความช่วยเหลือใด ๆ