أحداث مخصصة في JavaScript

تتضمن العديد من التعليمات البرمجية التي نكتبها الرد على الأحداث. أحداث I / O مثل نقرات الماوس أو أحداث لوحة المفاتيح. أحداث الشبكة ، عندما تستمع إلى مكالمة HTTP.

هذه هي ما أسميه الأحداث المدمجة.

في JavaScript ، يمكننا إنشاء أحداث مخصصة ، وتتغير طريقة عملها في المتصفح وفي Node.js.

في الواجهة الأمامية ، نستخدم كائن الحدث الذي يوفره المتصفح:

const anEvent = new Event('start');

يمكنك تشغيل الحدث باستخدام

document.dispatchEvent(anEvent)

وعندما يحدث هذا ، يتم تشغيل مستمع الحدث:

document.addEventListener('start', event => {   
  console.log('started!')
})

يمكنك إرسال بيانات مخصصة باستخدام ملفCustomEventكائن مضمن بدلاً منEvent، والتي تقبل الكائن كمعامل ثاني:

const anotherEvent = new CustomEvent('start', {
  detail: {
    color: 'white'
  }
})

استخدامCustomEvent، في مستمع الحدث يمكنك أن تطلب البيانات إلى كائن الحدث باستخدامevent.detail(لا يمكنك استخدام خاصية أخرى):

document.addEventListener('start', event => {   
  console.log('started!')
  console.log(event.detail)
})

على الجانب الخلفي ، تقدم لنا Node خيار إنشاء نظام مشابه باستخدامeventsوحدة.

هذه الوحدة ، على وجه الخصوص ، تقدمEventEmitterالصف الذي سنستخدمه للتعامل مع أحداثنا.

يمكنك تهيئة ذلك باستخدام

const EventEmitter = require('events')
const eventEmitter = new EventEmitter()

يكشف هذا الكائن ، من بين أشياء أخرى كثيرة ، عنonوemitأساليب.

  • emitيستخدم لبدء الحدث
  • onيستخدم لإضافة وظيفة رد الاتصال التي سيتم تنفيذها عند بدء الحدث

على سبيل المثال ، لنقم بإنشاء ملفstartكمسألة تقديم عينة ، فإننا نتفاعل مع ذلك بمجرد تسجيل الدخول إلى وحدة التحكم:

eventEmitter.on('start', () => {
  console.log('started')
})

عندما نركض

eventEmitter.emit('start')

يتم تشغيل وظيفة معالج الحدث ، ونحصل على سجل وحدة التحكم.

يمكنك تمرير الوسائط إلى معالج الأحداث بتمريرها كوسيطات إضافية إلىemit():

eventEmitter.on('start', (number) => {
  console.log(`started ${number}`)
})

eventEmitter.emit(‘start’, 23)

حجج متعددة:

eventEmitter.on('start', (start, end) => {
  console.log(`started from ${start} to ${end}`)
})

eventEmitter.emit(‘start’, 1, 100)


المزيد من دروس js: