jQuery Academy · บทเรียน

การสร้างและเรียกใช้เหตุการณ์แบบกำหนดเอง

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

บทนำสู่เหตุการณ์แบบกำหนดเอง

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

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

เหตุใดจึงควรใช้เหตุการณ์แบบกำหนดเอง

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

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

เมธอด .trigger()

ในการ “ส่ง” หรือ “เรียกใช้” เหตุการณ์แบบกำหนดเอง เราใช้เมธอด .trigger() ของ jQuery โดยเรียกใช้เมธอดนี้กับออบเจ็กต์ jQuery ซึ่งอาจเป็นองค์ประกอบหรือ document แล้วส่งชื่อเหตุการณ์เป็นสตริง

ชื่อเหตุการณ์จะเป็นอะไรก็ได้ตามที่คุณเลือก เช่น 'dataLoaded' หรือ 'itemAdded'

สาธิตการเรียกใช้เหตุการณ์

มาดูการทำงานของ .trigger() กัน เราจะเรียกใช้เหตุการณ์แบบกำหนดเองชื่อ 'myCustomEvent' บนปุ่มเมื่อมีการคลิก ขณะนี้ยังไม่มีอะไรเกิดขึ้น เพราะยังไม่มีผู้รับฟัง!

<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>

<script>
$(document).ready(function() {
  $('#triggerButton').on('click', function() {
    // Fire our custom event on the button itself
    $(this).trigger('myCustomEvent');
    console.log('myCustomEvent triggered!');
  });
});
</script>

การรับฟังด้วย .on()

ในการ “รับ” หรือ “รับฟัง” เหตุการณ์แบบกำหนดเอง เราใช้เมธอดที่คุ้นเคยอย่าง .on() เช่นเดียวกับเหตุการณ์ในตัว เช่น 'click' คุณจะระบุชื่อเหตุการณ์และฟังก์ชันที่จะทำงานเมื่อเหตุการณ์ถูกเรียกใช้

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

ตัวอย่างการเรียกใช้และรับฟัง

ตอนนี้มาลองใช้ .trigger() และ .on() ร่วมกัน คลิกปุ่ม แล้วคุณจะเห็นข้อความปรากฏขึ้น แสดงว่าเหตุการณ์แบบกำหนดเองของเราถูกเรียกใช้และได้รับการรับฟังแล้ว!

<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>

<script>
$(document).ready(function() {
  // 1. Listen for 'buttonClicked' on the button
  $('#myButton').on('buttonClicked', function() {
    $('#statusMessage').text('Status: Custom event received!');
  });

  // 2. When the button is clicked, trigger 'buttonClicked'
  $('#myButton').on('click', function() {
    $(this).trigger('buttonClicked');
  });
});
</script>

การส่งข้อมูลไปกับเหตุการณ์

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

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

สาธิตข้อมูลเหตุการณ์แบบกำหนดเอง

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

<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  // Listen for 'dataReady' and extract the passed data
  $(document).on('dataReady', function(event, message, details) {
    const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`; 
    $('#output').html(outputText);
  });

  // When button clicked, trigger 'dataReady' with data
  $('#loadData').on('click', function() {
    const msg = 'Data successfully loaded!';
    const data = { status: 'complete', item: 'report' };
    $(document).trigger('dataReady', [msg, data]);
    console.log('Data event triggered!');
  });
});
</script>

ลดการเชื่อมโยงเพื่อแอปที่ดียิ่งขึ้น

การใช้เหตุการณ์แบบกำหนดเองเพื่อการสื่อสารช่วยให้สร้างแอปพลิเคชันที่แบ่งเป็นโมดูลและดูแลรักษาได้ง่ายขึ้น ลองนึกภาพส่วนประกอบ “ตะกร้าสินค้า” และส่วนประกอบ “การแสดงสินค้า”

เมื่อมีการเพิ่มสินค้า ส่วนประกอบ “การแสดงสินค้า” จะเรียกใช้ 'productAdded'
ส่วนประกอบ “ตะกร้าสินค้า” จะรับฟัง 'productAdded' และอัปเดตตัวเอง

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

ตรวจสอบความเข้าใจของคุณ

ข้อความใดต่อไปนี้อธิบายประโยชน์หรือการใช้งานเหตุการณ์แบบกำหนดเองร่วมกับ .trigger() และ .on() ได้อย่างถูกต้อง

ทบทวน: เหตุการณ์แบบกำหนดเอง

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

คืออะไร: เหตุการณ์แบบกำหนดเองคือข้อความที่ผู้ใช้กำหนดขึ้นสำหรับส่วนประกอบของแอปพลิเคชัน
เหตุใด: ช่วยส่งเสริม การลดการเชื่อมโยง ทำให้โค้ดสะอาดและยืดหยุ่นยิ่งขึ้น
วิธีการ: ใช้ .trigger('eventName', [data]) เพื่อเรียกใช้เหตุการณ์
วิธีการ: ใช้ .on('eventName', function(event, data) { ... }) เพื่อรับฟังเหตุการณ์

การเชี่ยวชาญเหตุการณ์แบบกำหนดเองเป็นก้าวสำคัญสู่การสร้างแอปพลิเคชัน jQuery ที่มีความเสถียรและรองรับการขยายระบบ!

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

บทเรียน “การสร้างและเรียกใช้เหตุการณ์แบบกำหนดเอง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างและเรียกใช้เหตุการณ์แบบกำหนดเอง”

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

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

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

บทเรียน “การสร้างและเรียกใช้เหตุการณ์แบบกำหนดเอง” ใช้เวลานานแค่ไหน

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

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

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

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

การมอบหมายเหตุการณ์อย่างแข็งแกร่ง
การหยุดการส่งต่อเหตุการณ์
การสร้างและเรียกใช้เหตุการณ์แบบกำหนดเอง

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