JavaScript / أساسي: القيم وأسس المتصفح / الدرس 6

تحديث DOM وأحداث المستخدم

اربط حالة التطبيق المتحقق منها بمستند المتصفح. ابنِ تحديث نص آمن وعناصر أصلية ثم تتبع أهداف الأحداث وانتشارها وملكية مستمعيها.

وقت القراءة التقريبي: 4 دقيقةتاريخ مراجعة المحتوى 2026-10-25

في هذه الصفحة

أهداف الدرس

الاستعلام عن عقد المستند وتحديثها بأمان.
تتبع target وcurrentTarget.
ربط تسجيل المستمع بتنظيفه والدلالات الأصلية.

المستند شجرة كائنات حية

يمثل DOM العقد وعلاقاتها، وتوفر HTML دلالات العناصر. تعيد querySelector أول مطابق أو null، فتعامل مع الغياب قبل قراءة الخصائص. نفذ الإعداد بعد وجود البنية المطلوبة، غالباً ببرنامج وحدة يؤجل تنفيذه الافتراضي بالنسبة للتحليل. احتفظ بالمراجع محلياً لدى مالكها. يغير تحديث DOM العرض ولا يحدث نموذج التطبيق أو يحفظ شيئاً تلقائياً. حدّد الحالة المرجعية واعرض منها بدلاً من اعتبار نص الصفحة قاعدة بيانات.

إنشاء العقد وإدراج النص كنص

أنشئ عنصراً وعيّن textContent لعنوان دورة يأتي من البيانات، فيعامل المتصفح الأقواس كنص لا وسوم. تحلل innerHTML النص بوصفه HTML وتعبر حد ثقة مختلفاً؛ وليست أداة نص مكافئة. يبني المثال عقدة منفصلة فلا يعتمد على صفحة موجودة. أضفها عملياً للحاوية المقصودة بعد تجهيزها. اختر الدلالة عمداً؛ فالزر زر وعنصر القائمة يوضع في قائمة مناسبة.

javascript للمتصفح فقط: البيانات لا تحلل كوسوم

const item = document.createElement("li");
item.textContent = "<strong>DOM basics</strong>";
console.log(item.textContent);
console.log(item.children.length);

الناتج المتوقع

<strong>DOM basics</strong>
0

لا يوجد عنصر strong ابن. تحفظ textContent العنوان حرفياً كبيانات، ويتطلب المقطع متصفحاً يدعم DOM.

تصف الأحداث مساراً عبر الشجرة

يحدد target منشأ الحدث ويحدد currentTarget العنصر الذي يعالجه مستمعه الآن. لحدث يصعد من span داخل زر، يرى مستمع الزر span هدفاً والزر currentTarget. يشمل الانتشار الالتقاط ثم الصعود للأحداث التي تدعمه. يضبط stopPropagation الانتشار، ويطلب preventDefault إلغاء فعل افتراضي قابل للإلغاء. لا تضفهما آلياً؛ افهم ضرورة منع التنقل أو التسليم واحفظ سلوك لوحة المفاتيح والتقنيات المساعدة.

استخدام زر أصلي وامتلاك المستمع

يوفر الزر الأصلي التركيز والتفعيل اللذين لا يوفرهما div قابل للنقر تلقائياً. سجل قيمة دالة بـaddEventListener واحفظ هويتها للإزالة، أو استخدم AbortSignal مملوكاً للتنظيف المدعوم. يرسل المثال الحتمي حدثاً مصطنعاً صاعداً على عقد منفصلة لشرح الانتشار دون شبكة أو فعل مستخدم حقيقي. لا يثبت الإرسال المصطنع صلاحية لوحة المفاتيح الكاملة. ما زال المكوّن يحتاج تسمية مرئية وتركيزاً منطقياً وفحص مهمة المستخدم بعد التغير.

javascript للمتصفح فقط: target وcurrentTarget

const button = document.createElement("button");
const label = document.createElement("span");
label.textContent = "Enroll";
button.append(label);
button.addEventListener("click", event => {
  console.log(event.target.tagName, event.currentTarget.tagName);
});
label.dispatchEvent(new MouseEvent("click", { bubbles: true }));

الناتج المتوقع

SPAN BUTTON

تبدأ span الحدث لكن المستمع مسجل للزر. ولا يضاف عنصر للصفحة الفعلية.

عرض حالة مفهومة وتحرير الملكية

ينبغي أن يعكس التعطيل والتحميل وعدد النتائج حالة معرفة لا أعلاماً مستقلة تتناقض. استخدم تفويض الأحداث عندما يملك أب ثابت أفعال صفوف متغيرة، وحدد الفعل ببحث closest محدود. لا تعتبر data attribute تصريحاً أمنياً. عند إزالة العرض حرر المستمعين والمراجع كي لا تحدث الأحداث واجهة قديمة. اختبر الإعداد والفعل والتحرير معاً؛ فكثيراً ما لا يظهر التسجيل المكرر إلا بعد فتح المكوّن مرات.

الأخطاء الشائعة وإصلاحها

تسبب نتيجة محدد null خطأ TypeError

لماذا يحدث؟: غياب العقدة أو تنفيذ الإعداد قبل البنية.
كيف تصلحه؟: فحص المحدد ودورة الحياة وعقد العقد المطلوبة.
كيف تتجنب تكراره؟: اختبار غياب البنية والإعداد الطبيعي صراحة.

تحول نص المستخدم إلى وسوم قابلة للتنفيذ

لماذا يحدث؟: استخدام innerHTML لنص غير موثوق.
كيف تصلحه؟: استخدام textContent أو سياسة عرض آمنة مراجعة.
كيف تتجنب تكراره؟: فصل واجهات البيانات وبناء HTML.

تشغيل الفعل مرتين لنقرة واحدة

لماذا يحدث؟: إضافة مستمعين مكررين أثناء الإعداد.
كيف تصلحه؟: تحرير المستمعين المملوكين قبل إعادة التهيئة.
كيف تتجنب تكراره؟: اختبار التركيب والإزالة وإعادة التركيب.

اختبر فهمك

1. تنشأ نقرة من أيقونة داخل زر. أي هدف يحدد زر المستمع؟

اعرض الحل المشروح

استخدم currentTarget للمستمع المسجل على الزر؛ فقد يكون target الأيقونة. وللتفويض استخرج أقرب عنصر فعل مسموح وتحقق من انتمائه للحاوية قبل استخدام معرفه. ولا يثبت أي معرف صلاحية الخادم.

2. اعرض عنوان دورة حرفياً يحوي < و>. ما الافتراض الآمن؟