JavaScript Academy · درس

أحداث لوحة المفاتيح والماوس

تعاملوا مع النقرات وضغطات المفاتيح وأحداث المؤشر.

أحداث لوحة المفاتيح والماوس درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

عائلات أحداث الإدخال

تتيح أحداث الفأرة ولوحة المفاتيح إنشاء تفاعلات غنية. ولكل عائلة أنواع وخصائص متخصصة من الأحداث.

حدث click

يُطلَق click عند الضغط الأساسي ثم الإفلات. ويُطلَق أيضًا عند تفعيل الأزرار والروابط باستخدام لوحة المفاتيح، مما يجعله متاحًا.

btn.addEventListener("click", () => {
  console.log("activated");
});

dblclick وcontextmenu

يُطلَق dblclick عند النقر المزدوج، بينما يُطلَق contextmenu عند النقر بزر الفأرة الأيمن، وغالبًا ما يُلغى لعرض قائمة مخصصة.

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

mousedown وmouseup وmousemove

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

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

mouseenter مقارنةً بـ mouseover

لا ينتشر mouseenter إلى العناصر الأبناء، كما أنه يتجاهل حدودها، بينما ينتشر mouseover ويُطلَق عند الانتقال إلى العناصر المتفرعة. وعادةً ما يكون mouseenter هو الخيار المناسب للتحويم.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

أي زر فأرة

تحدد الخاصية button الزر الذي أطلق الحدث: 0 للأيسر، و1 للأوسط، و2 للأيمن.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

keydown وkeyup

يُطلَق keydown عند الضغط على مفتاح، ويتكرر ما دام المفتاح مضغوطًا، بينما يُطلَق keyup عند الإفلات. أما keypress فهو مهجور.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

تمثل e.key القيمة المنطقية للمفتاح: فقد تكون محرفًا مثل "a" أو اسمًا مثل "Enter" أو "Escape" أو "ArrowUp".

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

تمثل e.code موضع المفتاح الفعلي، مثل "KeyA" أو "Space"، بصورة مستقلة عن تخطيط لوحة المفاتيح. استخدمها لعناصر التحكم في الألعاب.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

اختصارات لوحة المفاتيح

اجمع أعلام المفاتيح المساعدة مع key لاكتشاف الاختصارات، واستدعِ preventDefault لتجاوز السلوك الافتراضي للمتصفح.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

repeat للمفاتيح المضغوطة

تكون e.repeat صحيحة عندما يُطلَق keydown بسبب استمرار الضغط على المفتاح، مما يتيح لك تجاهل التكرار التلقائي.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

تحقق سريع

اختر الخاصية المستقلة عن تخطيط لوحة المفاتيح.

مراجعة

تشمل أحداث الفأرة click وdblclick وmousedown/mouseup/mousemove، إضافةً إلى mouseenter/mouseleave الملائمين للتحويم؛ وتحدد button الزر المستخدم. وتستخدم أحداث لوحة المفاتيح keydown/keyup، حيث تشير e.key إلى المحرف أو الاسم، وتشير e.code إلى المفتاح الفعلي، بينما تشير e.repeat إلى المفاتيح التي استمر الضغط عليها.

الأسئلة الشائعة

هل درس «أحداث لوحة المفاتيح والماوس» مجاني؟

نعم — نص درس «أحداث لوحة المفاتيح والماوس» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «أحداث لوحة المفاتيح والماوس»؟

تعاملوا مع النقرات وضغطات المفاتيح وأحداث المؤشر. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «أحداث لوحة المفاتيح والماوس»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy