JavaScript: ทำความเข้าใจกับ CustomEvent และ dispatchEvent

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

ฉันหวังว่าคุณจะสามารถสร้างกิจกรรมที่กำหนดเองได้ในตอนท้ายของบทความนี้

เริ่มกันเลย!

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

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

เราจะสร้างเหตุการณ์ที่กำหนดเองได้อย่างไร

มีสองวิธีในการสร้างเหตุการณ์ที่กำหนดเอง

• วิธีแรกคือการใช้ตัวสร้างเหตุการณ์
• วิธีที่สองคือการใช้ตัว สร้าง CustomEventที่เราต้องการ

ตัวสร้างเหตุการณ์

คุณสามารถสร้างเหตุการณ์ที่กำหนดเองด้วยตัวสร้างเหตุการณ์ดังต่อไปนี้:

โปรดทราบว่าชื่อเหตุการณ์ไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่ ดังนั้น เหมือนกับหรือ . NOTIFICATION_ADD _ Notification_Add notification_add

const event = new Event('NOTIFICATION_ADD');

ดังที่เรากล่าวไว้ข้างต้น หากเราต้องการเพิ่มข้อมูลให้กับวัตถุเหตุการณ์ เราสามารถใช้ตัวสร้าง CustomEvent ได้ดังนี้:

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

เหตุการณ์ถูกสร้างขึ้น อะไรต่อไป? แน่นอนเราต้องการใช้ในโครงการของเรา ขั้นตอนสุดท้ายของการเริ่มเหตุการณ์คือการเรียกใช้เมธอด dispatchEvent() ยอมรับ พารามิเตอร์ เหตุการณ์ภายในซึ่งเป็นวัตถุเหตุการณ์

ผมขอแสดงตัวอย่าง

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

เราใช้มันเพื่อวัตถุประสงค์อะไรและที่ไหน?

ก่อนที่คุณจะอ่าน คุณอาจต้องการค้นหาบทความเหล่านี้เกี่ยวกับไมโครฟรอนท์เอนด์

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

ถ้าจะพูดถึงตัวอย่าง เรามีส่วนประกอบการแจ้งเตือนบนรีโมตและต้องการให้แสดงในหน้าใดหน้าหนึ่งหลังจากทำธุรกรรมบางอย่าง

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

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

สรุป

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

อ้างอิง