الفهم الصحيح لاستخدام Event Listeners والـ Callback Functions في JavaScript

هناك خلط في الفهم بين كيفية استخدام وتسجيل الحدث (event listener) وكيفية تعيين دالة كولباك (callback function).

عند استخدام addEventListener مثلما هو موضح في المثال الأول:

document.addEventListener("mousemove", myFunction);

هذا يعني أننا نقوم بتعيين دالة myFunction كدالة استجابة لحدث "mousemove" ،وتلك الدالة ستُستدعى في كل مرة يتم فيها تحريك الماوس على الشاشة، وسيتم تنفيذ الكود الموجود في داخل الدالة في كل مرة.

أما الشيء الذي قمت بتجربته:

document.addEventListener("mousemove", document.getElementById("demo").innerHTML = Math.random());

هناك خطأ في الاستخدام، لأنك تقوم بتعيين نتيجة تقييم تعبير document.getElementById("demo").innerHTML = Math.random() كدالة استجابة للحدث "mousemove"، وذلك ليس هو الهدف المطلوب.

بالنسبة للجزء الثاني من السؤال، عند استخدام setTimeout، يجب تمرير دالة كولباك كمعامل أول والوقت الذي يجب أن تنتظره كمعامل ثاني. لذلك، يجب استخدامه بهذه الطريقة:

const myTimeout = setTimeout(function() {
  document.getElementById("demo").innerHTML = "Happy day!";
}, 5000);

وذلك سيؤدي إلى تغيير نص العنصر برقم عشوائي بعد مرور 5 ثواني من تنفيذ السكريبت.

بتاريخ 2 ساعة قال Mustafa Suleiman:

هناك خلط في الفهم بين كيفية استخدام وتسجيل الحدث (event listener) وكيفية تعيين دالة كولباك (callback function).

عند استخدام addEventListener مثلما هو موضح في المثال الأول:

document.addEventListener("mousemove", myFunction);

هذا يعني أننا نقوم بتعيين دالة myFunction كدالة استجابة لحدث "mousemove" ،وتلك الدالة ستُستدعى في كل مرة يتم فيها تحريك الماوس على الشاشة، وسيتم تنفيذ الكود الموجود في داخل الدالة في كل مرة.

أما الشيء الذي قمت بتجربته:

document.addEventListener("mousemove", document.getElementById("demo").innerHTML = Math.random());

هناك خطأ في الاستخدام، لأنك تقوم بتعيين نتيجة تقييم تعبير document.getElementById("demo").innerHTML = Math.random() كدالة استجابة للحدث "mousemove"، وذلك ليس هو الهدف المطلوب.

بالنسبة للجزء الثاني من السؤال، عند استخدام setTimeout، يجب تمرير دالة كولباك كمعامل أول والوقت الذي يجب أن تنتظره كمعامل ثاني. لذلك، يجب استخدامه بهذه الطريقة:

const myTimeout = setTimeout(function() {
  document.getElementById("demo").innerHTML = "Happy day!";
}, 5000);

وذلك سيؤدي إلى تغيير نص العنصر برقم عشوائي بعد مرور 5 ثواني من تنفيذ السكريبت.

اذا لماذا نستعمل callback في حين ان العمليه تعمل دون  callback function?

أنت تقصد addEventListener، صحيح؟ 

في حال أردت تنفيذ أمر معين عند حدوث حدث محدد، عليك إما تمرير دالة callback لكي يتم استدعائها عند وقوع الحدث، أو كتابة دالة يتم استدعائها عند وقوع الحدث وليس كتابة الكود بشكل مباشر، أي نكتب دالة كالتالي بدلاً من callback:

function randomNumberGenerator() {
  return Math.random();
}

document.addEventListener("mousemove", function(e) {
  document.getElementById("demo").innerHTML = randomNumberGenerator();
});

بتاريخ 2 دقائق مضت قال Mustafa Suleiman:

أنت تقصد addEventListener، صحيح؟ 

في حال أردت تنفيذ أمر معين عند حدوث حدث محدد، عليك إما تمرير دالة callback لكي يتم استدعائها عند وقوع الحدث، أو كتابة دالة يتم استدعائها عند وقوع الحدث وليس كتابة الكود بشكل مباشر، أي نكتب دالة كالتالي بدلاً من callback:

function randomNumberGenerator() {
  return Math.random();
}

document.addEventListener("mousemove", function(e) {
  document.getElementById("demo").innerHTML = randomNumberGenerator();
});

 

شكرا لك الضاهر اني ازعجتك لاكن الcallback لا زلت غير مقتنع كيف تعمل , و ايضا لما تم وضع E كمعامل لداله رد النداء؟؟

تم اضافتها رغم انه لا يوجد مندخلات فما الحاجه اليها ؟