كائن الحدث
اقرؤوا تفاصيل الحدث مثل target وtype.
كائن الحدث درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
معامل الحدث
عند وقوع حدث، يمرر المتصفح كائن حدث إلى دالة المعالجة. ويحمل هذا الكائن تفاصيل حول ما حدث والعناصر المشاركة فيه.
btn.addEventListener("click", (event) => {
console.log(event.type); // "click"
});event.type
إن event.type هو اسم الحدث، مما يتيح لدالة معالجة واحدة الاستجابة بطرق مختلفة لأنواع الأحداث المختلفة.
function handle(e) {
console.log("Got a " + e.type + " event");
}event.target
إن event.target هو العنصر الذي نشأ فيه الحدث فعلًا، أي أعمق عنصر تفاعل معه المستخدم.
list.addEventListener("click", (e) => {
console.log(e.target); // the exact clicked element
});event.currentTarget
إن event.currentTarget هو العنصر الذي يعمل مستمعه حاليًا، أي العنصر الذي استدعيتم عليه addEventListener.
list.addEventListener("click", (e) => {
console.log(e.currentTarget === list); // true
});target في مقابل currentTarget
عندما تنتشر الأحداث تصاعديًا، قد يكون target عنصرًا فرعيًا، بينما يكون currentTarget هو العنصر الأب الذي يستمع إلى الحدث. ويُمكّن هذا الفرق من تفويض الأحداث.
list.addEventListener("click", (e) => {
// e.target = clicked <li>
// e.currentTarget = the <ul>
});تفويض الأحداث
أرفقوا مستمعًا واحدًا بعنصر أب، واستخدموا target.closest للعثور على العنصر الفرعي الذي تم التفاعل معه. ويتوسع هذا الأسلوب بصورة أفضل من استخدام مستمعين كثيرين.
list.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (item) console.log(item.dataset.id);
});event.timeStamp
يسجل event.timeStamp وقت إنشاء الحدث، وهو مفيد لقياس المدد الزمنية بين الأحداث.
btn.addEventListener("click", (e) => {
console.log(e.timeStamp);
});الإحداثيات في أحداث الفأرة
تضيف أحداث الفأرة بيانات موضعية مثل clientX/clientY (بالنسبة إلى إطار العرض) وpageX/pageY (بالنسبة إلى المستند).
area.addEventListener("click", (e) => {
console.log(e.clientX, e.clientY);
});مفاتيح التعديل
تخبركم الخصائص مثل e.shiftKey وe.ctrlKey وe.altKey وe.metaKey بمفاتيح التعديل التي كانت مضغوطة.
btn.addEventListener("click", (e) => {
if (e.shiftKey) console.log("Shift-click");
});event.isTrusted
تكون قيمة event.isTrusted هي true للأحداث التي أنشأها المستخدم فعلًا، وfalse للأحداث التي أنشأتها الشيفرة، مما يساعد على التمييز بين الإدخال الحقيقي والمصطنع.
btn.addEventListener("click", (e) => {
console.log(e.isTrusted);
});قراءة المفتاح
تتيح أحداث لوحة المفاتيح الخاصية e.key (الحرف أو الاسم)، لكي تتمكنوا من الاستجابة لمفاتيح محددة.
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") console.log("submit");
});اختبار سريع
ميّزوا بين الهدفين.
مراجعة
يصف كائن الحدث الحدثَ من خلال type وtarget (موضع نشأته) وcurrentTarget (موضع وجود المستمع). ويتيح الفرق بينها تفويض الأحداث. كما تكشف الأحداث عن الإحداثيات ومفاتيح التعديل وkey وtimeStamp وisTrusted.
الأسئلة الشائعة
هل درس «كائن الحدث» مجاني؟
نعم — نص درس «كائن الحدث» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «كائن الحدث»؟
اقرؤوا تفاصيل الحدث مثل target وtype. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «كائن الحدث»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.