ما هو استعمال addEventListener

Momen Gamal · 28 سبتمبر 2020

ايه استعمال addEventListener وهي عباره عن ايه اتفرجت علي كام فيديو بيشرحها ومش فهمها

Yomna Raouf · 28 سبتمبر 2020

بتاريخ 10 ساعات قال Momen Gamal:

ايه استعمال addEventListener وهي عباره عن ايه اتفرجت علي كام فيديو بيشرحها ومش فهمها

addEventListener تقوم بإضافة مُستمع أحداث لعُنصر ما من عناصر الصفحة.

و لكن ما هي الأحداث؟!

تفاعلات المستخدمين مع المواقع كلها أحداث إمَّا بالضغط على عنصر ما أو drag أو حتى scroll كل هذه تعتبر أحداث.

في بعض الأحيان كمطورين نكون مهتمين بهذه الأحداث و نريد تنفيذ أكواد معينة عندما يقوم المُستخدم بتنفيذ حدث مٌعين.

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

فمثلًا في youtube نكون مهتمين بحدث الضغط على زر subscribe حتى نقوم بإضافة المُستخدم إلى قائمة المشتركين في القناة:

<button id="subscribe__button" >Subscribe</button>

// click حتى نستمع إلى الحدث subscribe__button مع الزر addEventListener نقوم باستخدام مُستمع الأحداث 

// و إضافة المستخدم إلى قائمة المشتركينfunction بعد أن يحدث حدث الضغط هذا نقوم بتنفيذ الأكواد الموجودة داخل ال

document.querySelector("#subscribe__button").addEventListener( "click", function() {
  // أكواد إضافة المستخدم لقائمة المُشتركين بالقناة
})

يمكنك قراءة المزيد عن addEventListener من هنا.

Omar Haddad2 · 28 سبتمبر 2020

هي دالة يتم تنفيذها عند الإستماع لحدث معين .

توضيح :

في الكود تم إستدعاء الدالة لdocument أي أن الدالة ستستمع للأي حدث داخل الصفحة وتم إضافة بارميترين إثنين

الأول : وهو نوع الحدث وفي الكود تم تحديد click .
الثاني : الدالة التي تحتوي على ما سيتم تنفيذه بعد الحدث .

عملية تنفيذ الكود :

الحدث في الكود
- الحدث سيكون على الdocument وهذا الحدث الذي تنتظر الدالة حدوثه هو click على الصفحة , كما في الدالة
بعد النقر (أي بعد تنفيذ الحدث)
- سيتم تنفيذ ما بداخل الدالة وهو إضافة عبارة( Hello World!) داخل وسم الdemo

<!DOCTYPE html>
<html>
<body>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<p>Click anywhere in the document.</p>
<p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>
<p id="demo"></p>
<script>
document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World!";
});
</script>
</body>
</html>

تم التعديل في 28 سبتمبر 2020 بواسطة omar haddad

ياسين عناية · 28 سبتمبر 2020

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

الأحداث (event) : هي الإجراءات التي تحدث في المتصفّح والتي يبدأها المستخدم أو المتصفّح.

فيما يلي عدّة أمثلة عن الأحداث الشائعة التي يمكن أن تحدث على موقع الويب:
- نقر المستخدم على زر
- تحويم المستخدم سهم الفأرة فوق قائمة منسدلة
- إرسال المستخدم بياناته
- ضغط المستخدم على أحد مفاتيح لوحة مفاتيحه.

معالج الأحداث (event handler) : هو دالَة جافاسكربت تعمل عند وقوع حدثٍ ما.

يقوم مستمع الحدث (event listener) بإرفاق واجهة استجابة لعنصر، ممَّا يسمح لهذا العنصر بالانتظار لإطلاق الحدث المحدّد أو ويكأنه يتنصَّت ويستمع إلى صوت إطلاق ذلك الحدث المتمثِّل بعيار ناري.

هناك ثلاث طرق لإسناد الأحداث إلى العناصر:
- مُعَالِجَات الأحداث المضمّنة (Inline event handlers).
- خاصيات معالج الحدث (Event handler properties).
- مستمعو الأحداث (Event listeners).

و الآن سأوضح لك مثال يشرح لك الـ Eventlistener، و سيكون الحدث هو ( القيام بالضغط على أي زر من لوحة المفاتيح ) و معالجة الحدث ستكون ( بأن يتم الإستماع لهذا الحدث و تنفيذ أمر يطبع الزر الذي تم النقر عليه ) :

document.addEventListener('keydown', event => {
    console.log('key: ' + event.key);
});

الـ Output سيتم بمجرد النقر على أي زر على لوحة المفاتيح ( لنضغط مثلا على x )، الـ output :

اقتباس

key: x

أتمنى لك التوفيق.

تم التعديل في 28 سبتمبر 2020 بواسطة ياسين عناية

Abdulhamid Hamsho2 · 28 سبتمبر 2020

اليك هذه المقالة التي تشرح بشكل كامل عن فهم الأحداث في جافاسكرب addEventListener DOM، إضغط هنا.

كما يمكنك الإطلاع على جميع المقالات التي نشرت عن DOM داخل الأكاديمية من هذا الرابط، إضغط هنا

أتمنى لك التوفيق.

Momen Gamal · 28 سبتمبر 2020

بتاريخ 2 ساعات قال omar haddad:
هي دالة يتم تنفيذها عند الإستماع لحدث معين .

توضيح :

في الكود تم إستدعاء الدالة لdocument أي أن الدالة ستستمع للأي حدث داخل الصفحة وتم إضافة بارميترين إثنين

الأول : وهو نوع الحدث وفي الكود تم تحديد click .

الثاني : الدالة التي تحتوي على ما سيتم تنفيذه بعد الحدث .

عملية تنفيذ الكود :

الحدث في الكود
الحدث سيكون على الdocument وهذا الحدث الذي تنتظر الدالة حدوثه هو click على الصفحة , كما في الدالة

بعد النقر (أي بعد تنفيذ الحدث)
سيتم تنفيذ ما بداخل الدالة وهو إضافة عبارة( Hello World!) داخل وسم الdemo
<!DOCTYPE html>
<html>
<body>
This example uses the addEventListener() method to attach a click event to the document.
Click anywhere in the document.
Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.

<script>
document.addEventListener("click", function(){
 document.getElementById("demo").innerHTML = "Hello World!";
});
</script>
</body>
</html>

ايه الفرق بينها وبين onclick

Yomna Raouf · 28 سبتمبر 2020

بتاريخ 8 ساعات قال Momen Gamal:

ايه الفرق بينها وبين onclick

لا يوجد فرق يمكنك استخدام أي واحدة منهم. فهي فقط طرق مختلفة للقيام بنفس الوظيفة

Momen Gamal · 28 سبتمبر 2020

بتاريخ الآن قال Yomna Raouf:

لا يوجد فرق يمكنك استخدام أي واحدة منهم. فهي فقط طرق مختلفة للقيام بنفس الوظيفة

شكرا ليك ❤️

Omar Haddad2 · 28 سبتمبر 2020

بتاريخ 2 دقائق مضت قال Momen Gamal:

ايه الفرق بينها وبين onclick

لا يوجد فرق ,ال onclick تقوم بنفس الوظيفة

ayoubridouani · 28 سبتمبر 2020

معالج الحدث أو Event listener/handler: وهو عبارة عن دالة تعمل عندما يحدث حدث محدد مثلا دالة تعمل تلقائيا عند إكتمال تحميل الصفحة او الضغط على زر ما أو عند إدخالة شيء في ال input أو....

هناك طريقيتن لمعالجة الأحداث (أي جعل دوال معينه تعمل عند حدوث الحدث) و هما:

طريقة بسيطة و بدائية و تسمى بالـ DOM Level 0 events API و يتم فيها تعيين معالج الحدث (Event handler) للحدث من خلال صفات الهيتميل (html attributes)
طريقة متطورة و مرنة و تسمى بالـ DOM Level 2 Event API ,و يتم فيها تعيين معالج الحدث للحدث من خلال دوال خاصة بذلك .

يمكنك مشاهدة هذا الفيديو للتوضيح أكثر..

ما هو استعمال addEventListener

السؤال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

9 أجوبة على هذا السؤال

Recommended Posts

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على