جاري التحميل...

كائن الحدث

على جدار المتحف لوحة واحدة. الإطار الخارجي #wall. داخل اللوحة #plaque رابط، #seal، مكتوب عليه open، وhref هو /wing. تحت الجدار تقول #slip كلمة blank.
يمرّر المتصفح إلى الدالة كائنًا واحدًا. اسم الوسيط event. event.type نوع الحدث. النقرة تجعل هذا النص click. event.target هو العنصر الذي نزلت عليه النقرة. event.currentTarget هو العنصر الذي يجلس عليه هذا المستمع. يتطابقان فقط حين تكون النقرة والمستمع على عنصر واحد.
الختم رابط. preventDefault يلغي الذهاب إلى /wing. بعد النداء يصير event.defaultPrevented قيمة true. إن تركت النداء يبقى العلم false. ثم تسافر النقرة إلى الخارج: الختم، ثم اللوحة، ثم الجدار. stopPropagation على اللوحة يقطع الرحلة، فلا يعمل مستمع الجدار.
سكربت الصفحة ينقر الختم مرة. السطر تحت اللوحة: click / seal / plaque / true / quiet. هنا لا نكتب onclick، ولا نستدعي removeEventListener، ولا ننشئ عنصرًا.

الكائن الذي يمرّره المتصفح

الصفحة السابقة كانت مشجب المعاطف. دالتا wool وsilk بلا وسيط، فلم تقرآ هذا الكائن. سطرهما كان wool silk / 2 / peg. صفحة الجرس عيّنت onclick وقرأت this. هذه الصفحة لا تفعل ذلك. getElementById يعطيك الجدار واللوحة والختم والورقة فقط.
addEventListener ما زال يخزّن الدالة فقط. الكائن يصل حين تشغّل النقرة الدالة، لا حين تضيف المستمع. اقرأ currentTarget داخل الدالة. بعد عودة الدالة تصير هذه الخاصية null.

ماذا تقول نقرة واحدة

الورقة تبدأ blank. نص الرابط يبقى open. اقرأ الصفوف بالترتيب. كل مقطع يبدأ من جدار جديد، إلا صف الصفحة فهو العرض في الأسفل. ذلك العرض لا يستدعي removeEventListener.

📊 ماذا تقول نقرة واحدة

اللحظة ماذا تقرأ نص الورقة الخلط السهل
مستمع على الختم، seal.click()، قراءة النوع event.type click قراءة المعرّف كأنه النوع
مستمع على اللوحة، نقر الختم، قراءة target event.target.id seal قراءة currentTarget
نفس النقرة، قراءة currentTarget event.currentTarget.id plaque قراءة target
preventDefault على الختم، ثم العلم event.defaultPrevented true ظن أن الرابط ما زال يغادر
بلا preventDefault event.defaultPrevented false ظن أن كل مستمع يلغي الرابط
stopPropagation على اللوحة، والجدار يسمع أيضًا جمع marks plaque توقع plaque wall
سكربت الصفحة، click واحد السطر click / seal / plaque / true / quiet انتهاء السطر بـ wall

نقرة على الختم كائن واحد يراه كل مستمع على الطريق. type لا يتغير. target لا يتغير. currentTarget يتغير: هو العنصر الذي يعمل مستمعه الآن.
preventDefault يخاطب الفعل الافتراضي للمتصفح. لهذا الرابط الفعل هو اتباع /wing. النداء لا يزيل مستمعًا من القائمة. stopPropagation يخاطب الرحلة. لا يلغي الرابط. نداء أحدهما ليس نداء الآخر.
join(" ") يضع مسافة بين الكلمات الموجودة أصلًا في marks. لا نجمع قائمة فارغة هنا. الورقة تبدأ بكلمة blank وتتغير فقط داخل مستمع، أو في سكربت الصفحة بعد النقرة.

النوع

المستمع على الختم. الدالة تسمّي الوسيط event وتكتب event.type في الورقة. ثم يعمل seal.click().

قراءة النوع

javascript 
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readType(event) {
slip.textContent = event.type;
}
seal.addEventListener("click", readType);
seal.click();
console.log(slip.textContent);

الناتج click. النوع جنس الحدث، لا المعرّف ولا كلمة open.

العنصر الذي نُقر

جدار جديد. المستمع على اللوحة لا على الختم. النقرة ما زالت تنزل على الختم. event.target هو عنصر الهبوط، إذن event.target.id هو seal.

قراءة target

javascript 
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readTarget(event) {
slip.textContent = event.target.id;
}
plaque.addEventListener("click", readTarget);
seal.click();
console.log(slip.textContent);

الناتج seal. عنصر المستمع هو اللوحة. target لا يذكر اللوحة. يذكر العنصر تحت النقرة.

أين يجلس المستمع

نفس الجدار الجديد، المستمع ما زال على اللوحة، والنقرة على الختم. الورقة تكتب المعرّفين: target أولًا ثم currentTarget.

قراءة المعرّفين

javascript 
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readWhere(event) {
slip.textContent = event.target.id + " " + event.currentTarget.id;
}
plaque.addEventListener("click", readWhere);
seal.click();
console.log(slip.textContent);

الناتج seal plaque. الكلمة الأولى للنقرة. الثانية للعنصر الذي يملك هذا المستمع. ضع المستمع على الختم وانقر الختم: المعرّفان كلاهما seal، لأن النقرة والمستمع عنصر واحد. هذه القراءة من اللوحة، فالمعرّفان يختلفان. اقرأ currentTarget داخل الدالة. بعد عودتها يصير null.

إلغاء الرابط

href الختم هو /wing. الفعل الافتراضي لهذه النقرة اتباع الرابط. preventDefault يلغي ذلك الفعل. لا يزيل المستمع. بعد النداء مباشرة يكون event.defaultPrevented قيمة true.

إلغاء الرابط

javascript 
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function hold(event) {
event.preventDefault();
slip.textContent = String(event.defaultPrevented);
}
seal.addEventListener("click", hold);
seal.click();
console.log(slip.textContent);

الناتج true. اترك preventDefault فالقراءة نفسها تصير false. تقول الورقة false ويبقى فعل الرابط قائمًا. stopPropagation لا يضع هذا العلم.

النقرة تسافر إلى الخارج

الختم داخل اللوحة، واللوحة داخل الجدار. نقرة على الختم تصل إلى مستمع اللوحة ثم مستمع الجدار، ما لم تُقطع الرحلة. stopPropagation على اللوحة يقطعها. دالة الجدار لا تعمل. preventDefault لا يقطع الرحلة.

قطع الرحلة

javascript 
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let marks = [];
function onPlaque(event) {
marks.push("plaque");
event.stopPropagation();
}
function onWall() {
marks.push("wall");
}
plaque.addEventListener("click", onPlaque);
wall.addEventListener("click", onWall);
seal.click();
slip.textContent = marks.join(" ");
console.log(slip.textContent);

الناتج plaque. كلمة wall لا تنضم إلى marks. بلا stopPropagation كانت النقرة نفسها تكتب plaque wall. عرض الصفحة في الأسفل يقطع الرحلة ويلغي الرابط معًا.

سطر واحد تحت اللوحة

السكربت في آخر body، بعد وجود الجدار والفقرتين. مستمع الختم يستدعي preventDefault. مستمع اللوحة يستدعي stopPropagation ثم يحفظ النوع ومعرّف target ومعرّف currentTarget والعلم. مستمع الجدار كان سيضع heard على wall، لكن الرحلة قُطعت، فيبقى heard على quiet. يُكتب السطر بعد seal.click()، حين يكون الجدار قد أخذ فرصته.

عرض الصفحة — لوحة المتحف

html 
<!DOCTYPE html>
<html>
<head>
<title>event-object — page</title>
</head>
<body>
<div id="wall">
<div id="plaque">
<a id="seal" href="/wing">open</a>
</div>
</div>
<p id="slip">blank</p>
<p id="line">…</p>
<script>
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let kind = "";
let from = "";
let on = "";
let held = "";
let heard = "quiet";
seal.addEventListener("click", function (event) {
event.preventDefault();
});
plaque.addEventListener("click", function (event) {
event.stopPropagation();
kind = event.type;
from = event.target.id;
on = event.currentTarget.id;
held = String(event.defaultPrevented);
});
wall.addEventListener("click", function () {
heard = "wall";
});
seal.click();
slip.textContent = kind + " " + from + " " + on;
document.getElementById("line").textContent =
kind + " / " + from + " / " + on + " / " + held + " / " + heard;
</script>
</body>
</html>

السطر يصير click / seal / plaque / true / quiet. النوع click. معرّف target هو seal. معرّف currentTarget هو plaque، لأن ذلك المستمع على اللوحة. العلم true، لأن مستمع الختم استدعى preventDefault قبل أن يقرأ مستمع اللوحة العلم. الكلمة الأخيرة quiet لا wall، لأن stopPropagation عمل على اللوحة. نص open ليس في السطر. تصير الورقة click seal plaque. الصفحة التالية التفويض. الختم موجود أصلًا في الوسوم. هذه الصفحة لا تضيف ابنًا بعد المستمع.

خمسة فحوص عند اللوحة

  1. ضع المستمع على الختم وانقر. الورقة click.
  2. ضع المستمع على اللوحة، انقر الختم، واقرأ event.target.id. الورقة seal.
  3. نفس المستمع يكتب المعرّفين. الورقة seal plaque. مستمع على الختم نفسه يكتب seal seal.
  4. استدعِ preventDefault ثم اقرأ event.defaultPrevented. الورقة true. اترك النداء فتصير الورقة false.
  5. استدعِ stopPropagation على اللوحة والجدار يسمع أيضًا. ينضم marks إلى plaque. اقرأ سطر الصفحة: click / seal / plaque / true / quiet.

أين تخدعك هذه اللوحة

الرابط ما زال يقول open. الورقة ليست نص الرابط.

  • توقع أن وسيط الدالة هو عنصر الختم لا كائن الحدث
  • قراءة event.target حين أردت العنصر الذي يجلس عليه المستمع
  • قراءة event.currentTarget حين أردت العنصر تحت النقرة
  • توقع أن preventDefault يزيل المستمع، كما فعل removeEventListener على المشجب
  • توقع أن stopPropagation يلغي الذهاب إلى /wing
  • توقع أن مستمع الجدار يعمل بعد stopPropagation على اللوحة
  • قراءة event.currentTarget بعد عودة الدالة وتوقع plaque
  • تعيين onclick أو قراءة this وtypeof null؛ ذلك كان صفحة الجرس
  • بناء الرابط بـ createElement؛ ذلك كان صفحة أقدم
  • قراءة السطر كأنه ينتهي بـ wall، أو كسطر wool silk / 2 / peg

ما يبقى معك

  • event.type بعد النقرة هو click
  • المستمع على اللوحة والنقرة على الختم: event.target.id هو seal
  • في النقرة نفسها event.currentTarget.id هو plaque
  • المستمع على الختم: target و currentTarget كلاهما seal
  • preventDefault يجعل event.defaultPrevented قيمة true، وتركه يبقي false
  • stopPropagation على اللوحة يمنع مستمع الجدار
  • سطر الصفحة: click / seal / plaque / true / quiet

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 51 من 52
Javascript درس تعليمي