ال addEventListener() يتم استخدام الطريقة لإرفاق معالج الحدث بعنصر معين. ولا يتجاوز معالجات الأحداث الموجودة. يُقال إن الأحداث جزء أساسي من JavaScript. تستجيب صفحة الويب وفقًا للحدث الذي حدث. يمكن أن يتم إنشاء الأحداث بواسطة المستخدم أو يتم إنشاؤها بواسطة واجهات برمجة التطبيقات. مستمع الحدث هو إجراء جافا سكريبت الذي ينتظر وقوع حدث ما.
تعد طريقة addEventListener () وظيفة تحمل في ثناياه عوامل جافا سكريبت . يمكننا إضافة معالجات أحداث متعددة إلى عنصر معين دون الكتابة فوق معالجات الأحداث الموجودة.
بناء الجملة
element.addEventListener(event, function, useCapture);
على الرغم من أنه يحتوي على ثلاث معلمات، المعلمات حدث و وظيفة تستخدم على نطاق واسع. المعلمة الثالثة اختيارية للتعريف. يتم تعريف قيم هذه الوظيفة على النحو التالي.
قيمه المعامل
حدث: إنها معلمة مطلوبة. يمكن تعريفه كسلسلة تحدد اسم الحدث.
ملاحظة: لا تستخدم أي بادئة مثل 'on' مع قيمة المعلمة. على سبيل المثال، استخدم 'click' بدلاً من استخدام 'onclick'.
وظيفة: وهي أيضًا معلمة مطلوبة. إنها وظيفة جافا سكريبت الذي يستجيب للحدث الذي يحدث.
مجمّع النص CSS
استخدامالتقاط: إنها معلمة اختيارية. إنها قيمة من النوع المنطقي تحدد ما إذا كان سيتم تنفيذ الحدث في مرحلة الفقاعات أو مرحلة الالتقاط. قيمها المحتملة هي حقيقي و خطأ شنيع . عندما يتم تعيينه على 'صحيح'، يتم تنفيذ معالج الحدث في مرحلة الالتقاط. عندما يتم ضبطه على خطأ، يتم تنفيذ المعالج في مرحلة الفقاعات. قيمته الافتراضية هي خطأ شنيع .
دعونا نرى بعض الرسوم التوضيحية لاستخدام طريقة addEventListener().
مثال
إنه مثال بسيط لاستخدام طريقة addEventListener(). لدينا للنقر على المعطى زر HTML لرؤية التأثير.
جافا سكريبت النوم
مثال على طريقة addEventListener().
انقر على الزر التالي لرؤية التأثير.
انقر فوق لي document.getElementById('btn').addEventListener('click', fun); وظيفة fun() { document.getElementById('para').innerHTML = 'Hello World' + '' + 'مرحبًا بك في javaTpoint.com'; }اختبره الآن
انتاج |
بعد النقر على زر HTML المحدد، سيكون الإخراج -
الآن، في المثال التالي سنرى كيفية إضافة العديد من الأحداث إلى نفس العنصر دون الكتابة فوق الأحداث الموجودة.
مثال
في هذا المثال، نقوم بإضافة أحداث متعددة لنفس العنصر.
هذا مثال على إضافة أحداث متعددة لنفس العنصر.
الأبجدية والأرقام
انقر على الزر التالي لرؤية التأثير.
انقر فوقي function fun() { تنبيه ('مرحبًا بك في javaTpoint.com')؛ } function fun1() { document.getElementById('para').innerHTML = 'هذه هي الوظيفة الثانية'; } function fun2() { document.getElementById('para1').innerHTML = 'هذه هي الوظيفة الثالثة'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('click', fun); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);اختبره الآنانتاج |
الآن، عندما نضغط على الزر، سيتم عرض تنبيه. بعد النقر على زر HTML المحدد، سيكون الإخراج -
عندما نخرج من التنبيه، يكون الإخراج -
مثال
في هذا المثال، نقوم بإضافة أحداث متعددة من نوع مختلف إلى نفس العنصر.
هذا مثال على إضافة أحداث متعددة من نوع مختلف إلى نفس العنصر.
انقر على الزر التالي لرؤية التأثير.
انقر فوق لي function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'أصفر'; btn.style.color = 'blue'; } function fun1() { document.getElementById('para').innerHTML = 'هذه هي الوظيفة الثانية'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', fun); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);اختبره الآنانتاج |
عندما نحرك المؤشر فوق الزر، سيكون الإخراج -
بعد الضغط على الزر وترك المؤشر، سيكون الإخراج -
لغة الآلة
حدث محتدما أو التقاط الحدث
الآن، نحن نفهم استخدام المعلمة الثالثة لـ addEventListener() في JavaScript، أي، useCapture.
في HTML DOM، محتدما و اسر هما طريقتان لنشر الحدث. يمكننا أن نفهم هذه الطرق من خلال أخذ مثال.
لنفترض أن لدينا عنصر div وعنصر فقرة بداخله، وقمنا بتطبيق 'انقر' الحدث لكليهما باستخدام addEventListener() طريقة. السؤال المطروح الآن هو النقر على عنصر الفقرة، أي حدث النقر الخاص بالعنصر سيتم التعامل معه أولاً.
لذلك، في محتدما، تتم معالجة حدث عنصر الفقرة أولاً، ثم تتم معالجة حدث عنصر div. وهذا يعني أنه في الفقاعات، يتم التعامل مع حدث العنصر الداخلي أولاً، ثم سيتم التعامل مع حدث العنصر الخارجي.
في اسر تتم معالجة حدث عنصر div أولاً، ثم تتم معالجة حدث عنصر الفقرة. وهذا يعني أنه عند التقاط حدث العنصر الخارجي، سيتم التعامل مع حدث العنصر الخارجي أولاً، ثم سيتم التعامل مع حدث العنصر الأعمق.
الرموز التعبيرية التفاح على الروبوت
addEventListener(event, function, useCapture);
يمكننا تحديد الانتشار باستخدام useCapture معامل. عندما يتم تعيينه على false (وهي قيمته الافتراضية)، يستخدم الحدث الانتشار الفقاعي، وعندما يتم تعيينه على true، يتم استخدام نشر الالتقاط.
يمكننا أن نفهم محتدما و اسر باستخدام الرسم التوضيحي.
مثال
في هذا المثال، هناك عنصرين div. يمكننا أن نرى تأثير الفقاعات على عنصر div الأول وتأثير الالتقاط على عنصر div الثاني.
عندما ننقر نقرًا مزدوجًا فوق عنصر الامتداد لعنصر div الأول، فسيتم التعامل مع حدث عنصر الامتداد أولاً من عنصر div. تسمى محتدما .
ولكن عندما ننقر نقرًا مزدوجًا فوق عنصر الامتداد لعنصر div الثاني، فسيتم التعامل مع حدث عنصر div أولاً من عنصر الامتداد. تسمى اسر .
div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true); اختبره الآن انتاج |
يتعين علينا النقر نقرًا مزدوجًا فوق العناصر المحددة لرؤية التأثير.