شرح محتدما للحدث والتقاط الأحداث في جافا سكريبت: كيفية الاستخدام؟
نشرت: 2020-03-26جدول المحتويات
مقدمة
هناك مصطلحان شائعان يستخدمان لتدفق الأحداث في JavaScript هما Event Bubbling و Event Capturing .
هاتان طريقتان مهمتان يتم من خلالهما نشر حدث في واجهة برمجة تطبيقات HTML DOM عندما يسجل كلا العنصرين مؤشرًا لحدث ويحدث الحدث في عنصر متداخل في عنصر آخر. يتم تحديد الترتيب الذي يتم فيه استلام الحدث بواسطة العناصر بواسطة طريقة انتشار الحدث. تابع القراءة لمعرفة استخدام Event Bubbling و Event Capturing في JavaScript ولماذا يكون ذلك مطلوبًا في تطوير صفحة الويب.
الماخذ الرئيسية
- شرح مصطلحات الحدث وتدفق الحدث ومعالجات الأحداث والمستمعين للأحداث
- محتدما الأحداث والتقاط الأحداث في جافا سكريبت
- فائدة محتدما الأحداث والتقاط الأحداث في جافا سكريبت
الأحداث وتدفق الأحداث
يتوسط تفاعل صفحات الويب بتنسيق HTML مع JavaScript الأحداث التي تحدث عندما يتلاعب المستخدم أو المستعرض بالصفحة. إن تحميل الصفحة ، قيام المستخدم بالنقر فوق الزر ، وإغلاق النافذة ، كلها أمثلة على الأحداث.
يُطلق على الترتيب الذي يتم به تلقي الأحداث على صفحة الويب اسم تدفق الأحداث. تكتمل عملية تدفق الحدث في 3 خطوات - التقاط الحدث (اعتراض الحدث) ، واستهداف الحدث (يحصل الهدف على الحدث) وانبعاث الحدث (الاستجابة للحدث).
معالجات الأحداث ومستمعي الأحداث في JavaScript
Event Handler هو رمز JavaScript مكتوب داخل علامات HTML بدلاً من داخل علامات <script>. تقوم معالجات الأحداث بتنفيذ JavaScript عند وقوع حدث مثل الضغط على زر. البنية الأساسية هي: name_of_handler = "كود JavaScript هنا"
<a href="https://www.google.com” onClick="alert('hello!”)"> Goolge </a>
الإجراء الذي ينتظر حدوث الحدث هو مستمع الحدث. تحتوي JavaScript على وظيفة مضمنة ، وهي addEventListener () ، والتي تتلقى الحدث للاستماع إليه ، وتستدعي وسيطة ثانية عند إطلاق الحدث المذكور. الصيغة هي: element.addEventListener (حدث ، مستمع) ؛
محتدما الحدث في جافا سكريبت
Event Bubbling هو مصطلح شائع يتم مواجهته أثناء تطوير صفحة ويب أو تطبيق ويب باستخدام JavaScript. تشكل فقاعات الحدث مرحلة في عملية تدفق الحدث عندما يبدأ الحدث عند العنصر الأكثر تحديدًا أو العقدة الأكثر تداخلًا في DOM ويتدفق لاحقًا إلى الأعلى نحو العقدة الأقل تحديدًا ، أي المستند.
مصدر
<! DOCTYPE HTML>
<html>
<head>
<title> …… </title>
</head>
<الجسم>
<div id = ”demo”> اضغط هنا </ div>
</body>
</html>
عند النقر فوق العنصر <div> ، يتم إجراء الحدث "click" بالترتيب التالي:
- <div>
- <الجسم>
- <html>
- وثيقة
يؤدي حدث "النقر" إلى تنشيط العنصر <div>. يتم تشغيل كل عقدة لاحقًا على طول شجرة DOM ، لأعلى ، حتى يتم الوصول إلى مستند الكائن.
قراءة: أفكار ومواضيع المشروع مكدس كامل
التقاط الأحداث في JavaScript
يعد Event Capturing نموذجًا بديلاً في تدفق الأحداث تم تقديمه لأول مرة بواسطة متصفح Netscape. كما هو مذكور في هذا النموذج ، يتم تلقي الحدث أولاً بواسطة العقدة الأقل تحديدًا وتتلقى العقدة الأكثر تحديدًا أو العنصر الأكثر تداخلًا الحدث الأخير. في هذا النموذج ، يتم اعتراض حدث قبل أن يصل إلى الهدف الفعلي. ومع ذلك ، على عكس Event Bubbling ، تفتقر المتصفحات الحديثة إلى الدعم لهذا النموذج ، وبالتالي ، لا يمكن استخدام Event Capturing إلا في ظروف معينة.
مصدر
بالإشارة إلى المثال المذكور في القسم السابق ، يؤدي النقر فوق العنصر <div> إلى تشغيل الحدث "click" بالترتيب التالي:
- وثيقة
- <الجسم>
- <html>
- <div>
ماذا يحدث في مرحلة التقاط الحدث؟
في مرحلة التقاط الحدث ، يتم استدعاء المستمعين الملتقطين الذين تم تسجيل قيمتها على أنها "حقيقية". هو مكتوب بالطريقة التالية:
el.addEventListener ("انقر" ، مستمع ، صحيح)
هنا يتم تسجيل حدث لأن قيمة المستمع مسجلة على أنها "صحيحة". في حالة عدم وجود قيمة ، تكون القيمة الافتراضية "خطأ" مع نتيجة عدم تسجيل الحدث. ومن ثم في هذه المرحلة ، يتم استدعاء الأحداث ذات القيمة الحقيقية فقط والتقاطها. في مرحلة الهدف اللاحقة ، يتم استدعاء جميع المستمعين المسجلين ، بغض النظر عما إذا كانت قيمتهم مسجلة على أنها صحيحة أو خاطئة.
تدفق أحداث DOM في JavaScript
يحدد DOM المستوى 2 ثلاث مراحل لنموذج تدفق الحدث:
- مرحلة التقاط الحدث
- في الهدف
- مرحلة محتدما الحدث
مصدر
إذا كانت هناك فرصة لاعتراض الحدث ، فإن تسجيل الحدث يحدث أولاً. ويتبع ذلك الهدف الفعلي الذي يحصل على الحدث. في نهاية المطاف ، في مرحلة احتدام الأحداث ، تتم الاستجابة النهائية للحدث. بالإشارة إلى المثال المذكور في القسم السابق ، يؤدي النقر فوق العنصر <div> إلى تنشيط الحدث "click" بالترتيب الموضح في الرسم البياني أعلاه.
قراءة: راتب Full Stack Developer في الهند
فائدة محتدما الأحداث والتقاط الأحداث في جافا سكريبت
في مرحلة الأحداث المتساقطة ، لا يتم استدعاء سوى الأحداث التي تحتوي على قيمة علامة "خطأ" (غير الملتحقين). تعد فقاعات الأحداث والتقاط الأحداث من الجوانب المهمة في DOM.
el.addEventListener ('انقر' ، مستمع ، خطأ) // لا يلتقط المستمع
el.addEventListener ('انقر' ، مستمع) // لا يلتقط المستمع
يوضح الكود أعلاه كيفية عمل الفقاعات ومراحل الالتقاط. كل حدث لا يصل إلى الهدف. لا يتم إنشاء فقاعات بعض الأحداث وتتوقف بعد المرحلة المستهدفة. لا يمكن تطبيق حدث الفقاعة في جميع أنواع الأحداث ويجب أن يمتلك المستمع الخاصية المنطقية ".bubble" من كائن الحدث بالإضافة إلى امتلاك بعض الخصائص الأخرى مثل - e.target (للإشارة إلى هدف الحدث) و ه.مرحلة الحدث (المستمعون الحاليون يسجلون في هذا الوضع).
خاتمة
يتألف تدفق الأحداث في JavaScript من ثلاث مراحل مهمة - مرحلة التقاط الحدث ، ومرحلة الهدف ، ومرحلة احتدام الأحداث. يعتبر تسجيل الأحداث هو أول حدث يحدث ، حيث يتم اعتراض الأحداث إذا لزم الأمر. ويتبع ذلك وصول الحدث إلى الهدف الفعلي والمرحلة النهائية تطفو على السطح ، عندما تحدث الاستجابة النهائية لحدث ما. وبالتالي ، يمكن الاستنتاج بشكل مناسب أن Event Bubbling و Event Capturing في JavaScript هما الأسس التي يعتمد عليها معالج الأحداث وتفويض الحدث.
إذا كنت مهتمًا بمعرفة المزيد حول المكدس الكامل ، فراجع دبلوم PG الخاص بـ upGrad & IIIT-B في تطوير البرامج الكامل المكدس المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، وأكثر من 9 مشاريع ومهام ، IIIT- حالة الخريجين B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.