Momen Gamal نشر 28 سبتمبر 2020 أرسل تقرير نشر 28 سبتمبر 2020 ايه استعمال addEventListener وهي عباره عن ايه اتفرجت علي كام فيديو بيشرحها ومش فهمها 1 اقتباس
0 Yomna Raouf نشر 28 سبتمبر 2020 أرسل تقرير نشر 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 من هنا. 1 اقتباس
0 Omar Haddad2 نشر 28 سبتمبر 2020 أرسل تقرير نشر 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 2 اقتباس
0 ياسين عناية نشر 28 سبتمبر 2020 أرسل تقرير نشر 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 بواسطة ياسين عناية 2 اقتباس
0 Abdulhamid Hamsho2 نشر 28 سبتمبر 2020 أرسل تقرير نشر 28 سبتمبر 2020 اليك هذه المقالة التي تشرح بشكل كامل عن فهم الأحداث في جافاسكرب addEventListener DOM، إضغط هنا. كما يمكنك الإطلاع على جميع المقالات التي نشرت عن DOM داخل الأكاديمية من هذا الرابط، إضغط هنا أتمنى لك التوفيق. 1 اقتباس
0 Momen Gamal نشر 28 سبتمبر 2020 الكاتب أرسل تقرير نشر 28 سبتمبر 2020 بتاريخ 2 ساعات قال omar haddad: هي دالة يتم تنفيذها عند الإستماع لحدث معين . توضيح : في الكود تم إستدعاء الدالة ل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> ايه الفرق بينها وبين onclick اقتباس
0 Yomna Raouf نشر 28 سبتمبر 2020 أرسل تقرير نشر 28 سبتمبر 2020 بتاريخ 8 ساعات قال Momen Gamal: ايه الفرق بينها وبين onclick لا يوجد فرق يمكنك استخدام أي واحدة منهم. فهي فقط طرق مختلفة للقيام بنفس الوظيفة 1 اقتباس
0 Momen Gamal نشر 28 سبتمبر 2020 الكاتب أرسل تقرير نشر 28 سبتمبر 2020 بتاريخ الآن قال Yomna Raouf: لا يوجد فرق يمكنك استخدام أي واحدة منهم. فهي فقط طرق مختلفة للقيام بنفس الوظيفة شكرا ليك ❤️ اقتباس
0 Omar Haddad2 نشر 28 سبتمبر 2020 أرسل تقرير نشر 28 سبتمبر 2020 بتاريخ 2 دقائق مضت قال Momen Gamal: ايه الفرق بينها وبين onclick لا يوجد فرق ,ال onclick تقوم بنفس الوظيفة 1 اقتباس
0 ayoubridouani نشر 28 سبتمبر 2020 أرسل تقرير نشر 28 سبتمبر 2020 معالج الحدث أو Event listener/handler: وهو عبارة عن دالة تعمل عندما يحدث حدث محدد مثلا دالة تعمل تلقائيا عند إكتمال تحميل الصفحة او الضغط على زر ما أو عند إدخالة شيء في ال input أو.... هناك طريقيتن لمعالجة الأحداث (أي جعل دوال معينه تعمل عند حدوث الحدث) و هما: طريقة بسيطة و بدائية و تسمى بالـ DOM Level 0 events API و يتم فيها تعيين معالج الحدث (Event handler) للحدث من خلال صفات الهيتميل (html attributes) طريقة متطورة و مرنة و تسمى بالـ DOM Level 2 Event API ,و يتم فيها تعيين معالج الحدث للحدث من خلال دوال خاصة بذلك . يمكنك مشاهدة هذا الفيديو للتوضيح أكثر.. 1 اقتباس
السؤال
Momen Gamal
ايه استعمال addEventListener وهي عباره عن ايه اتفرجت علي كام فيديو بيشرحها ومش فهمها
9 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.