คู่มือสำหรับผู้เริ่มต้นใช้งาน jQuery on()

jQuery on() method คือวิธีการแนบตัวจัดการเหตุการณ์กับองค์ประกอบ องค์ประกอบที่ส่งผ่านไปยังตัวเลือกสามารถเป็นอะไรก็ได้บนหน้า โดยทั่วไป on() เป็นวิธีแนบตัวจัดการการคลิกกับปุ่ม ในทางปฏิบัติ on() สามารถแนบตัวจัดการเหตุการณ์กับองค์ประกอบที่เลือกได้

ในคู่มือนี้ เราจะพูดถึงรูปแบบพื้นฐานของ on() และดูตัวอย่างการใช้งานจริงบางส่วน สิ่งสำคัญคือต้องพูดถึงว่า jQuery on() ยอมรับอาร์กิวเมนต์ทางเลือกที่จะไม่ถูกกล่าวถึงในที่นี้ เราจะยึดตามข้อโต้แย้งที่จำเป็นและการใช้งานทั่วไป สามารถดูข้อมูลเพิ่มเติมเกี่ยวกับอาร์กิวเมนต์ที่ไม่บังคับได้ที่นี่

jQuery on() คืออะไร

jQuery on() method เป็นวิธีที่เสถียรในการแนบตัวจัดการเหตุการณ์กับองค์ประกอบที่เลือก เมื่อตั้งชื่อตัวจัดการแล้ว on() ใช้ฟังก์ชันโทรกลับ ฟังก์ชันเรียกกลับเป็นฟังก์ชันที่ส่งผ่านไปยังเมธอดที่ดำเนินการในภายหลัง เพื่อจุดประสงค์ของเรา ฟังก์ชันเรียกกลับเป็นที่ที่บางสิ่งจะเกิดขึ้น

สมมติว่าเราใช้ on() เพื่อแนบตัวจัดการเหตุการณ์การคลิกบนปุ่ม ฟังก์ชันเรียกกลับของเราคือตำแหน่งที่เราจะกำหนดการดำเนินการที่จะเกิดขึ้นหลังจากคลิกปุ่ม

on() jQuery Syntax

ตอนนี้เราก็ได้แนวคิดแล้วว่า on() ได้ผล มาดูไวยากรณ์เฉพาะของมันกัน จำไว้ใน jQuery ทั้งหมด เราเริ่มต้นด้วยการเลือกองค์ประกอบของเรา จากนั้นเราเรียก on() วิธีการแนบตัวจัดการเหตุการณ์ของเรา อาร์กิวเมนต์แรกส่งผ่านไปยัง on() เป็นชื่อตัวจัดการเหตุการณ์เอง และตามด้วยฟังก์ชันเรียกกลับ

$('.btn').on('click', function() {
  alert("You clicked the button!")
})

ที่นี่ เรากำลังเลือกปุ่มของเรา เรียก on() และผ่านการโต้แย้งที่จำเป็นของเรา สังเกตว่าชื่อตัวจัดการเหตุการณ์ต้องอยู่ในใบเสนอราคา ในฟังก์ชันการโทรกลับ เรากำลังแสดงการแจ้งเตือนพร้อมข้อความ ซึ่งช่วยให้เราทราบว่าฟังก์ชันการโทรกลับทำงานอย่างถูกต้อง

เพิ่มเติมเกี่ยวกับ jQuery alert() สามารถพบได้ที่นี่

jQuery on() ตัวอย่าง

มาขยายตัวอย่างปุ่มด้านบนของเรากัน ตอนนี้เรารู้แล้วว่าไวยากรณ์พื้นฐานทำงานอย่างไรสำหรับ jQuery on() . ตัวอย่างเช่น เรามาทำอะไรมากกว่าแสดงข้อความเตือนหลังจากคลิกปุ่มแล้ว

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

แทนที่จะแสดงข้อความเตือน เราสามารถแสดงเนื้อหาใหม่หลังจากที่คลิกปุ่มแล้ว ในการทำเช่นนี้ เราจะใช้ jQuery append() เมธอดภายในฟังก์ชันการโทรกลับของเรา jQuery append() แนบเนื้อหาที่ส่งผ่านเป็นอาร์กิวเมนต์ไปยังจุดสิ้นสุดขององค์ประกอบที่เลือก อ่านเพิ่มเติมเกี่ยวกับ jQuery append() ที่นี่.

ในการเริ่มต้น เรากำลังแสดงปุ่ม HTML และ

ซึ่งเราจะต่อท้ายเนื้อหาใหม่

<button class="btn">
Click me!
</button>

<div class="message">

</div>

นี้จะแสดงเพียงปุ่มสำหรับตอนนี้

มีปุ่มของเราที่ต้องการคลิก! ตอนนี้เราเลือกด้วย jQuery และมีข้อความปรากฏขึ้นหลังจากคลิก

$('.btn').on('click', function() {
  $('.message').append('The button has been clicked.')
})

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

ด้วยชื่อคลาส "ข้อความ"

on()ของเรา วิธีการทำงาน! สิ่งหนึ่งที่ควรทราบเกี่ยวกับการใช้ jQuery append() นี่คือข้อความของเราจะถูกแนบไปที่ด้านล่างของ

ทุกครั้งที่คลิกปุ่ม ลองมาดูตัวอย่างอื่น

ในตัวอย่างต่อไป เราจะแทนที่ปุ่มด้วยเนื้อหาใหม่หลังจากที่คลิกแล้ว สิ่งนี้จะเลียนแบบประสบการณ์ของผู้ใช้ที่มีการควบคุมมากขึ้น

<div>
<button class="btn">
Click me!
</button>
</div>

ที่นี่ เราได้รวมปุ่มของเราไว้ใน

ซึ่งจะทำให้เราใช้ jQuery html() และแทนที่ปุ่มด้วยแท็ก

ที่มีข้อความ บางครั้งเราต้องการให้ผู้ใช้คลิกปุ่มเพียงครั้งเดียวและถูกนำไปยังเนื้อหาใหม่!

$('.btn').on('click', function() {
  $('div').html('<p>The button has been replaced</p>')
})

เช่นเดียวกับตัวอย่างก่อนหน้านี้ เรากำลังเลือกปุ่มและใช้ on() เพื่อแนบตัวจัดการการคลิก ภายในฟังก์ชันการโทรกลับ เรากำลังแทนที่ปุ่ม HTML ด้วยองค์ประกอบย่อหน้าที่มีเนื้อหา HTML ใหม่

เมื่อคลิกปุ่มแล้ว:

เรามีเนื้อหาใหม่และไม่มีปุ่ม! นี่เป็นวิธีที่มีประสิทธิภาพในการชี้นำประสบการณ์ผู้ใช้ด้วยวิธีที่ควบคุมได้มากขึ้น

บทสรุป

เราได้เห็นแล้วว่า jQuery on() สามารถแนบตัวจัดการเหตุการณ์กับองค์ประกอบในโค้ดที่มีประสิทธิภาพไม่กี่บรรทัด หลังจากที่เราเรียนรู้ไวยากรณ์พื้นฐานแล้ว เราได้ดูตัวอย่างสองตัวอย่างว่า jQuery on() เป็นอย่างไร สามารถใช้ได้. มีความยืดหยุ่นเพียงพอที่จะใช้ในวิธีเฉพาะหรือโดยทั่วไปขึ้นอยู่กับผลลัพธ์ที่ต้องการ

เนื่องจากคู่มือนี้เป็นการแนะนำการใช้งาน jQuery on() ให้แน่ใจว่าได้ใช้เวลาในการฝึกฝน มีประโยชน์หลายอย่างรอให้คุณค้นพบเมื่อคุณก้าวไปสู่ความเชี่ยวชาญในการจัดการเหตุการณ์!