كيف يتم تنفيذ أسلوب addEventListener () في JavaScript؟

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

• ما هو مستمع الحدث؟
• AddEventListener () في JavaScript
• قيمه المعامل
• AddEventListener في JavaScript: مثال

ما هو مستمع الحدث؟

مستمع الحدث هو إجراء في JavaScript ينتظر حدوث حدث. المثال البسيط لـ حدث هو نقر المستخدم بالماوس أو الضغط على مفتاح على لوحة المفاتيح.

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

addEventListener () في JavaScript

قليلا من ال الميزات من طريقة مستمع الحدث ما يلي:

• ال addEventListener () طريقة تعلق ملف معالج الحدث للعنصر المحدد.
• تقوم هذه الطريقة بإرفاق معالج حدث إلى عنصر بدون الكتابة معالجات الأحداث الحالية.
• يمكنك إضافة ملفات العديد من معالجي الأحداث لعنصر واحد.
• يمكنك إضافة العديد من معالجات الأحداث لـ نفس النوعيه لواحد جزء ، أي حدثان 'نقرة'.
• يمكن إضافة مستمعي الحدث إلى أي حكم ليس فقط عناصر HTML. أي كائن النافذة.
• طريقة addEventListener () تجعلها أسهل للتحكم في كيفية يتفاعل الحدث إلى محتدما.

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

أيضًا ، يمكنك بسهولة إزالة مستمع الحدث باستخدام ملف طريقة removeEventListener () .

مساحة الاسم في c ++

بناء الجملة:

target.addEventListener (type، listener [، options]) target.addEventListener (type، listener [، useCapture]) target.addEventListener (type، listener [، useCapture، wantUntrusted])

قيمه المعامل

الآن بعد أن تعرفت على كيفية عمل مستمع الحدث ، دعنا نلقي نظرة على مثال على addEventListener () في JavaScript.

addEventListener () في JavaScript: مثال

& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & GT. ('myBtn'). addEventListener ('click'، myFunction) function myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt

بهذا نصل إلى نهاية addEventListener في JavaScript. أتمنى أن تفهم كيف يستمع الحدث طريقة يعمل في JavaScript.

تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'addEventListener in JavaScript' وسنعاود الاتصال بك.