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

تعتبر معالجة الأحداث مفهومًا مهمًا في JavaScript. تتيح الأحداث لصفحات HTML أن تكون ديناميكية وتفاعلية ، مما يتيح لك إنشاء واجهات مستخدم جذابة. يمكنك كتابة تعليمات برمجية لتشغيل JavaScript عند وقوع حدث على DOM.

يمكن أن يكون الحدث عندما ينقر المستخدم على عنصر HTML ، أو يتم تحميل الصفحة ، أو عندما تتغير قيمة حقل الإدخال. يمكنك كتابة التعليمات البرمجية التي تغير بنية HTML عند وقوع حدث. تعلم ثلاث طرق مختلفة يمكنك من خلالها إضافة مستمعين للأحداث إلى التعليمات البرمجية الخاصة بك.

1. طريقة addEventListener

تعد طريقة addEventListener إحدى الطرق الشائعة طرق مستمع الحدث. لديها ثلاث معلمات:

  • كائن يمثل الحدث.
  • وظيفة للتعامل معها.
  • منطقي اختياري ، useCapture ، الذي يصف كيفية انتشار الحدث عبر DOM.

يمكن أن يكون الحدث أي حدث DOM محدد على عنصر هدف. يتم إعداد وظيفة للاستجابة لهذا الحدث عند حدوثه.

يمكن أن تكون الوظيفة مجهولة أو دالة مسماة. تتضمن الأهداف الشائعة عنصرًا وتوابعه ومستندًا ونافذة تدعم حدثًا.

instagram viewer

تعد addEventListener () طريقة موصى بها لإدارة مستمعي الأحداث في JavaScript. إنه يعمل على أي هدف حدث ، وليس فقط عناصر HTML ، ويدعم معالجات الأحداث المتعددة.

قد ترغب في تنفيذ بعض التعليمات البرمجية على DOM. يمكنك طباعة نص أو إجراء عمليات حسابية أو عرض صورة عندما ينقر المستخدم على الزر.

دعنا نوضح الكود التالي:

لغة البرمجة>
<لغة البرمجة>
<جسم>
<h1>طريقة addEventListener مع الوظائفh1>
<زربطاقة تعريف="myBtn">انقر هنازر>
<صبطاقة تعريف="عرض">ص>
جسم>
لغة البرمجة>

بعد ذلك ، أضف مستمع الحدث باستخدام الزر.

مقدار ثابت عنصر = وثيقة.getElementById ("myBtn");
element.addEventListener ("انقر"، myFunction1) ؛
وظيفةوظيفتي 1() {
وثيقة.getElementById ("عرض") .innerHTML + = "تم تنفيذ Fuction! "
}

عند النقر فوق الزر ، تتم طباعة نص "تم تنفيذ الوظيفة" على الشاشة ، كما هو موضح أدناه.

2. تفويض الأحداث لإضافةEventListener

تفويض حدث في JavaScript هو نمط يستخدم للتعامل مع أحداث متعددة. بدلاً من إضافة مستمع الحدث إلى كل عنصر ، فأنت تضيف فقط مستمع الحدث إلى عنصر سلف. يمكنك الوصول إلى العنصر الذي أطلق الحدث عبر ملف .هدف خاصية كائن الحدث.

هذا يضمن أن جميع العناصر التي تستهدفها لها سلوك مشترك. بدونها ، سيكون عليك إضافة مستمع حدث إلى كل واحد يدويًا.

فيما يلي مثال على تفويض الحدث:

لغة البرمجة>
<لغة البرمجة>
<جسم>
<h1> تفويض الحدث على الأزرارh1>
<شعبة>
<زر>زر +1زر>
<زر>الزر 2زر>
<زر>الزر 3زر>
شعبة>
جسم>
لغة البرمجة>

بعد ذلك ، أضف مستمعي الأحداث إلى جميع الأزرار ببضعة سطور من التعليمات البرمجية.

مقدار ثابت div = وثيقة.querySelector ("div")
div.addEventListener ("انقر"، (حدث) => {
لو (event.target.tagName 'زر') {
وحدة التحكم.سجل("تم النقر فوق الزر")
 }
});

تفويض الحدث هو نمط يعتمد على حدث فقاعات. تحدث فقاعة الحدث عندما يتلقى عنصر حدثًا وينقله إلى عناصره الأصلية والأسلاف في DOM. إنه ل انتشار الحدث المفهوم الذي يحدث افتراضيًا في JavaScript.

3. استخدام خاصية onclick

يمكنك استخدام السمة onclick لتشغيل JavaScript عندما ينقر المستخدمون على عنصر. مثل طريقة addEventListener ، يمكنك استخدام طريقة onclick لطباعة النص وإجراء العمليات الحسابية وتغيير ميزات العناصر على DOM.

يمكنك إضافة مستمع حدث onclick كمعالج حدث مضمّن إلى عنصر HTML. يقع الحدث عندما ينقر المستخدم على العنصر. قم بتغيير لون الفقرة التالية ديناميكيًا باستخدام طريقة onclick:

لغة البرمجة>
<لغة البرمجة>
<جسم>
<h1> قم بتنفيذ أحداث onClickh1>
<صبطاقة تعريف="عرض"عند النقر="myFunction ()">
 انقر فوقي لتغيير لون النص الخاص بي.
ص>
جسم>
لغة البرمجة>

في ملف JavaScript ، أضف الكود التالي:

وظيفةوظيفتي() {
وثيقة.getElementById ("عرض"). style.color = "أحمر";
}

سيظهر الإخراج كما هو موضح:

لماذا تعرف على مستمعي الأحداث؟

بصفتك مطور JavaScript ، ستستخدم غالبًا مستمعي الأحداث في المشاريع. يمكنك إنشاء العديد من الميزات مع مستمعي الأحداث ، بما في ذلك أحداث الفقاعة والتقاطها. إن فهم هذه المفاهيم سيسهل عليك إنشاء واجهات ديناميكية على تطبيقاتك.