jQuery Academy · บทเรียน

การมอบหมายเหตุการณ์อย่างแข็งแกร่ง

การมอบหมายเหตุการณ์อย่างแข็งแกร่ง เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

การมอบหมายเหตุการณ์คืออะไร

ยินดีต้อนรับสู่การมอบหมายเหตุการณ์! เทคนิคอันทรงพลังนี้ช่วยให้คุณจัดการเหตุการณ์ในเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพ

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

การผูกโดยตรง: ข้อจำกัด

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

ในตัวอย่างนี้ ลองคลิกปุ่มเริ่มต้น จากนั้นรอสักครู่จะมีปุ่มใหม่ปรากฏขึ้น ลองคลิก ปุ่มใหม่ แล้วจะพบว่าปุ่มไม่ตอบสนอง!

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

ทำความเข้าใจการแพร่กระจายของเหตุการณ์

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

คุณสมบัติ event.target จะอ้างอิงถึง องค์ประกอบต้นทางที่ทำให้เกิดเหตุการณ์เสมอ ไม่ว่าจะมีองค์ประกอบแม่ตัวใดเป็นผู้รับเหตุการณ์ก็ตาม ลองคลิกองค์ประกอบด้านล่าง แล้วสังเกตผลลัพธ์ในคอนโซล

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

.on() ของ jQuery สำหรับการมอบหมายเหตุการณ์

คุณสามารถใช้เมธอด .on() ของ jQuery สำหรับการมอบหมายเหตุการณ์ได้ โดยระบุอาร์กิวเมนต์ selector เพิ่มเติม ไวยากรณ์มีดังนี้:

$(parentSelector).on(event, childSelector, handler);

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

ตัวอย่างการมอบหมายเหตุการณ์

ตอนนี้มาประยุกต์ใช้การมอบหมายเหตุการณ์เพื่อแก้ปัญหาจากฉากที่ 2 กัน เราจะผูกตัวรับฟังไว้กับ คอนเทนเนอร์แม่ (#my-list) แต่กำหนดให้ตอบสนองเฉพาะเมื่อการคลิกมาจากองค์ประกอบที่ตรงกับ .item

โปรดสังเกตว่าเมื่อปุ่มใหม่ปรากฏขึ้น ปุ่มนั้นจะ ตอบสนอง ต่อการคลิกได้แล้ว!

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

รองรับองค์ประกอบแบบไดนามิก

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

เนื่องจากตัวรับฟังอยู่ที่องค์ประกอบแม่แบบคงที่ ลูกใหม่ใด ๆ ที่ตรงกับ childSelector จะอยู่ภายใต้การดูแลของตัวรับฟังเพียงตัวเดียวนั้นโดยอัตโนมัติ คุณไม่จำเป็นต้องผูกเหตุการณ์ใหม่ทุกครั้งที่เพิ่มเนื้อหา!

เพิ่มประสิทธิภาพ

นอกจากรองรับเนื้อหาแบบไดนามิกแล้ว การมอบหมายเหตุการณ์ยังมีข้อได้เปรียบด้านประสิทธิภาพอย่างมาก:

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

เมื่อใดควรมอบหมายเหตุการณ์

การมอบหมายเหตุการณ์เป็นเครื่องมือที่มีประสิทธิภาพ แต่ไม่จำเป็นต้องใช้เสมอไป ต่อไปนี้คือสถานการณ์ที่เหมาะสมสำหรับการใช้งาน:

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

แนวทางปฏิบัติที่ดีสำหรับการมอบหมายเหตุการณ์

เพื่อใช้ประโยชน์จากการมอบหมายเหตุการณ์ได้อย่างเต็มที่ โปรดปฏิบัติตามแนวทางต่อไปนี้:

เลือกองค์ประกอบแม่แบบคงที่ที่ใกล้ที่สุด: มอบหมายเหตุการณ์ให้กับบรรพบุรุษที่ใกล้ที่สุด ซึ่งรับประกันได้ว่าจะมีอยู่เมื่อหน้าเว็บโหลด หลีกเลี่ยงการมอบหมายให้กับ document หรือ body หากมีองค์ประกอบแม่ที่ใกล้กว่านั้นใช้งานได้
ทำความเข้าใจ $(this): ภายในตัวจัดการเหตุการณ์ที่ได้รับการมอบหมาย $(this) จะอ้างถึง องค์ประกอบต้นทางที่ตรงกับ childSelector ไม่ใช่องค์ประกอบแม่ที่ผูกตัวรับฟังไว้
ใส่ใจกับการแพร่กระจาย: แม้การแพร่กระจายจะเป็นประโยชน์ต่อการมอบหมายเหตุการณ์ แต่บางครั้งอาจก่อให้เกิดผลข้างเคียงที่ไม่ตั้งใจหากไม่ได้จัดการ (เช่น ใช้ event.stopPropagation() ซึ่งจะกล่าวถึงในบทเรียนอื่น)

ทดสอบความรู้ของคุณ

สถานการณ์ใดต่อไปนี้เหมาะอย่างยิ่งสำหรับการใช้การมอบหมายเหตุการณ์

ทบทวนการมอบหมายเหตุการณ์

ทำได้ดีมากครับ/ค่ะ! คุณได้เรียนรู้หลักการสำคัญของการมอบหมายเหตุการณ์ใน jQuery แล้ว

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

การเชี่ยวชาญการมอบหมายจะช่วยให้การจัดการเหตุการณ์ของคุณมีความทนทานและรองรับการขยายระบบได้ดี!

คำถามที่พบบ่อย

บทเรียน “การมอบหมายเหตุการณ์อย่างแข็งแกร่ง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การมอบหมายเหตุการณ์อย่างแข็งแกร่ง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การมอบหมายเหตุการณ์อย่างแข็งแกร่ง”

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

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การมอบหมายเหตุการณ์อย่างแข็งแกร่ง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ jQuery Academy