ما المقصود بمستمع الحدث؟
مستمع الحدث هو دالة في JavaScript تنتظر وقوع حدث ما ثم تستجيب له. JavaScript هي لغة برمجة يستخدمها المطورون في بناء صفحات ويب تفاعلية. تتيح لك دالة مستمع الحدث في JavaScript إنشاء استجابات مخصصة للأحداث مثل نقرات الماوس ونقرات لوحة المفاتيح وتغيير حجم النافذة. يُطلق على نموذج البرمجة للانتظار والاستجابة للأحداث في الوقت الفعلي اسم معالجة الأحداث.
ما المقصود بصيغة دالة مستمع الحدث؟
تشترك دالة مستمع الحدث في خصائص مشابهة لدوال JavaScript الأخرى. عند تنشيط هذه الدالة، تتخذ الإجراء اللازم لمعالجة الحدث. على سبيل المثال، يمكن لدالة مستمع الحدث تغيير النص المعروض أو جمع المعلومات من نماذج التسجيل أو تخزين البيانات في قواعد البيانات.
صيغة مستمع الحدث
تتبع دالة مستمع الحدث صيغة JavaScript المناسبة، كما هي الحال في المثال التالي.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
يوضح هذا المثال دالة مستمع الحدث RespondMouseClick. من الشائع كتابة اسم الدالة لتعكس الغرض من مستمع الحدث. في الدالة، يمكنك كتابة تعليمات برمجية لتنفيذ إجراءات محددة عند وقوع الحدث. في هذا المثال، تُلحق الدالة النص MouseClick happened بعنصر HTML textdisplay1.
صيغة معالج الحدث
عوضًا عن ذلك، يمكنك استخدام دالة معالج الحدث للاستجابة للحدث المنشّط، كما في المثال التالي.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
يتيح لك ذلك إدارة أنواع متعددة من الأحداث من عنصر معين باستخدام دالة واحدة.
على سبيل المثال، يمكنك تسجيل أحد مستمعات الأحداث للتعامل مع جميع أنواع أحداث سلسلة الكتل على التطبيقات القائمة على الأحداث. للاطلاع على المزيد من المعلومات، اقرأ عن إنشاء تطبيق قائم على الأحداث باستخدام Amazon Managed Blockchain.
كيف تضيف أحد مستمعات الأحداث؟
لا يمكن تنشيط أحد مستمعات الأحداث إلا بعد إضافته إلى عنصر JavaScript المعني. لفعل ذلك، يمكنك استخدام الصيغة التالية:
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
على سبيل المثال، يمكن للمطورين استدعاء الدالة التالية لربط مستمع حدث النقر بأحد عناصر الزر.
btn.addEventListener("click", RespondMouseClick);
يمكنك أيضًا إضافة مستمعات أحداث متعددة إلى كائن حدث معين بدون الكتابة فوق معالجات الأحداث الموجودة.
على سبيل المثال، تتيح Amazon Web Services (AWS) للمطورين ربط عمليات الاستدعاء المتعددة على كائن AWS.Request. للاطلاع على المزيد من المعلومات، اقرأ عن كيفية استخدام طلب مستمع حدث الكائن على AWS.
المعلمات المستخدمة لإضافة الأحداث
فيما يلي شرح للمعلمات الواردة في الصيغة السابقة:
- معلمة event (الحدث) هي أي حدث JavaScript صالح، مثل النقر والتغيير وتمرير الماوس والنقر على المفتاح والتحميل.
- معلمة listener (المستمع) هي عملية استدعاء الحدث أو دالة JavaScript التي أُنشئت استجابةً لأحداث معينة.
- المعلمة useCapture (استخدام وضع الالتقاط) هي معلمة اختيارية تشير إلى وضع نشر الحدث. وهي تقبل القيم المنطقية، حيث تنشط القيمة true (صحيح) وضع الالتقاط بينما تنشط القيمة false (خطأ) وضع التوزيع الفقاعي. تكون القيمة الافتراضية لهذه المعلمة معيَّنة إلى false.
- تتكون المعلمة options (الخيارات) من عدة قيم اختيارية، تشمل وضع الالتقاط وإشارات الرفض، التي تمثل سلوكيات المستمع.
كيف يمكنك إزالة أحد مستمعات الأحداث؟
تظل مستمعات الأحداث نشطة حتى تزيلها من عناصر JavaScript المرتبطة. يمكنك استخدام الصيغة التالية للقيام بذلك.
element.removeEventListener(type, listener, useCapture);
تتشابه معلمات إزالة مستمع الحدث مع تلك التي تستخدمها لإضافة مستمعات الأحداث. عند إزالة أحد مستمعات الأحداث، يجب تحديد المعلمات type (النوع) وlistener (المستمع) وuseCapture (استخدام الالتقاط) نفسها. إذا لم تفعل ذلك، فسيظل مستمع الحدث نشطًا، وسيستمر في تشغيل الأحداث في المستقبل.
على سبيل المثال، يمكنك إضافة حدث باستخدام التعليمة البرمجية التالية.
button.addEventListener("click", RespondMouseClick, true);
ولكن تطبيق التعليمة البرمجية التالية يفشل في إزالة مستمع الحدث. ويرجع ذلك إلى أن قيمة useCapture تختلف عن تلك المسجلة في كائن الزر.
button.removeEventListener("click", RespondMouseClick, false);
يمكنك استخدام التعليمة البرمجية التالية لإزالة الحدث بنجاح ومنع تشغيله.
button.removeEventListener("click", RespondMouseClick, true);
ما آلية عمل دوال مستمعات الأحداث المتداخلة؟
مستمعات الأحداث المتداخلة هي معالجات أحداث مضافة إلى عناصر HTML في طبقات هرمية مختلفة.
في مثال HTML التالي، يمتلك المستند العنصر الأصلي الأساسي، بينما يمتلك العنصر الأصلي العنصر الفرعي.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
قد تحتوي تطبيقات الويب المعقدة على طبقات متعددة من العناصر الأصلية والفرعية مع دوال مستمعات الأحداث ذات الصلة. عند وقوع حدث معين، فإنه يشغل مستمعات الأحداث في طبقات مختلفة بترتيب معين. على سبيل المثال، يؤدي النقر على زر فرعي إلى نشر الحدث إلى جميع المعالجات التي تلتقط أي نقرة بالماوس.
يمكن أن تنتشر الأحداث في وضعين: التوزيع الفقاعي والالتقاط.
التوزيع الفقاعي للأحداث
التوزيع الفقاعي هو الوضع الافتراضي لمعالجة أحداث JavaScript. وفيه ينتشر الحدث من الطبقة الداخلية إلى الطبقة الخارجية.
على سبيل المثال، يمكن للمستخدم التمرير فوق أحد مربعات النص في القسم الفرعي. بعد ذلك، يمكن للتطبيق تمرير الحدث بالترتيب التالي:
- يعالج مستمع الحدث في القسم الفرعي حدث التمرير بالماوس.
- بعد ذلك، يعالج مستمع الحدث الأصلي هذا الحدث، ويمرر التحكم إلى مستمع حدث المستند.
لإعداد التوزيع الفقاعي للأحداث، استخدم الصيغة التالية:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
التقاط الأحداث
التقاط الأحداث هو وضع خاص لمعالجة الأحداث في JavaScript حيث ينتشر الحدث إلى الداخل من الطبقة الخارجية. يتغير وضع معالجة الأحداث إلى وضع التوزيع الفقاعي بمجرد وصول الحدث إلى العنصر الهدف في الطبقة الداخلية. بعد ذلك، ينشر وضع التوزيع الفقاعي الحدث إلى الخارج إلى الطبقة العليا.
على سبيل المثال، يمكن للمستخدم النقر على زر فرعي وبدء التسلسل التالي:
- يعالج مستمع حدث المستند حدث النقر بالماوس، متبوعًا بمعالج الحدث الأصلي.
- يصل الحدث إلى العنصر الهدف، وهو الزر. يعالج مستمع حدث الزر هذا الحدث.
- تنتقل معالجة الحدث من وضع الالتقاط إلى وضع التوزيع الفقاعي.
- يشغل حدث النقر بالماوس نفسه معالج الحدث على مستوى العنصر الأصلي قبل أن ينتهي عند المستند.
كيفية الاختيار بين وضعي التوزيع الفقاعي والالتقاط
يتيح لك وضعا التوزيع الفقاعي والالتقاط التعامل مع الأحداث بشكل مختلف. نادرًا ما يُستخدم وضع التوزيع الفقاعي لأن وضع الالتقاط كافٍ للتعامل مع معظم الأحداث في التطبيقات.
عندما تقرر الاختيار بين وضعي التوزيع الفقاعي والالتقاط، يجب أن تفكر في تدفق نشر الأحداث وكيفية توافقه مع منطق برمجة التطبيق الخاص بك.
على سبيل المثال، ضع في اعتبارك النموذج الأصلي الذي يتكون من عنصرين فرعيين، حيث يتطلب العنصر الأول تحديثًا فوريًا عند وقوع حدث في العنصر الثاني. يجب عليك استخدام وضع الالتقاط في هذه الحالة؛ لأنه يضمن أن يعالج مستمع الحدث الأصلي الحدث ويحدِّث العنصر الأول. وبعد ذلك، يمرر التحكم إلى مستمع الحدث في العنصر الفرعي الثاني.
كيف يمكنك إيقاف نشر الحدث في دوال مستمعات الأحداث المتداخلة؟
تنتشر الأحداث حتى تصل إلى الوجهة النهائية في ترتيب معين لمستمعات الأحداث المتداخلة. يجب عليك استخدام طرق محددة لمنع الحدث من الانتشار أكثر.
توقف الطريقة التالية الحدث عند مستمع الحدث.
event.stopPropagation();
على سبيل المثال، إذا استدعيت StopPropagation على الزر الفرعي، فلن ينتشر حدث النقر بالماوس إلى مستوى العنصر الأصلي ومستوى المستند. لهذا، لن تُشغل مستمعات الأحداث عند المستوى الأعلى.
إيقاف نشر جميع الأحداث
يوقف StopPropagation نوع الحدث الحالي فقط من الانتشار. إذا احتوى الكائن على أنواع مختلفة من مستمعات الأحداث المسجلة به، فستظل قابلة للتشغيل على الرغم من استدعاء stopPropagation.
لإيقاف جميع الأحداث المتعلقة بكائن معين، يمكنك استخدام طريقة StopImmediatePropagation، على النحو التالي.
event.stopImmediatePropagation();
عندما يستدعي أحد مستمعات الأحداث StopImmediatePropagation، لا يُشغل أي مستمع حدث آخر مقترن بالكائن.
كيف يمكن أن تدعم AWS متطلبات JavaScript الخاصة بك؟
تقدم Amazon Web Services (AWS) المنصة AWS SDK for JavaScript حتى تتمكن من استخدام الخدمات في تطبيقاتك بسهولة مع المكتبات وواجهات برمجة التطبيقات (API).
يمكنك استخدام مجموعة تطوير البرمجيات (SDK) لتطوير تطبيقات الويب من جانب الخادم والويب والهاتف الجوال. تدعم مجموعة تطوير البرمجيات (SDK) وقت تشغيل JavaScript وNode.JS وReact Native، بالإضافة إلى وقت التشغيل المتعدد. يتيح ذلك للمطورين تشغيل حزمة خدمة العميل نفسها على منصات مختلفة.
فيما يلي فوائد أخرى لاستخدام مجموعة تطوير البرمجيات (SDK):
- إن مجموعة تطوير البرمجيات (SDK) مكتوبة بلغة البرمجة TypeScript. يتيح هذا فوائد مثل فحص النوع الثابت ودعم الفئة والوحدة النمطية.
- تقدم مجموعة تطوير البرمجيات (SDK) مجموعة برامج وسيطة تتيح لك تقديم إجراءات مخصصة.
- تتسم مجموعة تطوير البرمجيات (SDK) بأن لها بنية نموذجية. ويسمح لك ذلك باستخدام الحزم الضرورية فقط لتحسين أداء التطبيق.
ابدأ استخدام تطبيقات JavaScript من خلال التسجيل للحصول على حساب AWS اليوم.
