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

مستمعو الأحداث

في غرفة المعاطف مشجب واحد. الزر هو #peg ومكتوب عليه hang. تحته يقول #ticket كلمة blank.
الصفحة السابقة كانت جرس الباب وخاصية onclick. هناك مكان واحد. الدالة الثانية كانت تمسح الأولى. هنا لا نكتب تلك الخاصية، ولا نقرأ typeof ولا this.
هذه الصفحة عن addEventListener. يضيف الدالة إلى قائمة النقر على الزر. السطر نفسه لا يشغّلها. تبقى التذكرة blank إلى أن تستدعي peg.click().
أضف wool ثم silk. الثاني لا يزيح الأول. نقرة واحدة تشغّل الاثنين: أولًا wool ثم silk. تصير التذكرة wool silk. نص الزر يبقى hang.
إذا مررت دالة wool نفسها مرتين، الإضافة الثانية لا تفعل شيئًا. نقرة واحدة، تشغيل واحد.
removeEventListener يزيل الدالة التي أضفتها أنت. دالة جديدة، حتى لو نسخت أسطر wool، كائن آخر. wool تبقى.
سكربت الصفحة يضيف الاثنين وينقر مرة. السطر تحت المشجب: wool silk / 2 / peg. لا ننشئ عنصرًا، ولا نكتب نمطًا، ولا نقرأ وسيط الحدث. ذلك للصفحة التالية.

خطّافان لا مكان واحد

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

من يسمع

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

📊 من يسمع

اللحظة من يسمع نص التذكرة الخلط السهل
click ولا مستمع بعد لا أحد blank ظن أن النقر الفارغ يكتب wool
addEventListener لـ wool قبل click wool blank ظن أن الإضافة نفسها تكتب wool
click وwool فقط wool wool تحوّل نص الزر إلى wool
wool ثم silk ونقرة واحدة الاثنان، wool ثم silk wool silk تشغيل الثاني فقط
removeEventListener لـ wool ثم click silk silk تشغيل الاثنين
سكربت الصفحة، نقرة واحدة الاثنان wool silk انتهاء السطر بـ hang

addEventListener("click", wool) يضع wool في آخر قائمة النقر. لا يستدعيها. peg.click() يرسل نقرة ويشغّل القائمة من أولها. نص الزر نفسه لا يتغير.
حين تضيف silk بعد ذلك، تجلس خلف wool. تعملان معًا. الترتيب هو ترتيب الإضافة.
لا يُضاف كائن الدالة مرتين. peg.addEventListener("click", wool) ثم السطر نفسه مرة أخرى يُبقي القائمة بعنصر واحد. نقرة واحدة تشغّل wool مرة. parts.length يصير 1 والتذكرة wool.
removeEventListener("click", wool) يزيل ذلك الكائن. إذا كنت أضفت silk تبقى silk. دالة جديدة تدفع "wool" أيضًا لا تطابق. بعد peg.removeEventListener("click", function () { parts.push("wool"); }) تبقى wool الأصلية في القائمة. النقر ما زال يكتب wool.
join(" ") يضع مسافة بين الكلمات الموجودة الآن في parts. لا نضم قائمة فارغة هنا. التذكرة تبدأ بكلمة blank وتتغير فقط داخل مستمع.

لا أحد يسمع بعد

الملف يفتح بالزر والفقرة. لم يُضف مستمع. النقر يجري، وهذان السجلان يسألان عن التذكرة وعن الكلمة على الزر.

مشجب ساكن

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);

السجلان: blank وhang. قائمة النقر كانت فارغة. الفقرة لم تتغير.

المستمع ينتظر

addEventListener يخزّن wool. الجسم لا يعمل في ذلك السطر. parts تبقى فارغة، والتذكرة blank، والزر ما زال يقول hang.

أضف ولا تشغّل

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

السجلات: blank و0 وhang. wool في القائمة. لم يستدعها أحد، فلا كلمة في parts.

click يشغّل من في القائمة

هذا المقطع يبدأ من الزر الجديد مرة أخرى. تُضاف wool فقط، ثم peg.click(). تصير التذكرة wool. نص الزر يبقى hang. parts.length يساوي 1.

مستمع واحد

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);
console.log(parts.length);

السجلات: wool وhang و1. مستمع واحد، كلمة واحدة. hang ما زالت كلمة الزر.

silk تجلس بجانب wool

زر جديد. تُضاف wool ثم silk، وبعد ذلك نقرة واحدة. لا نقرة بين الإضافتين. wool تدفع "wool" وتكتبها. silk تدفع "silk" وتكتب الكلمتين بمسافة. التذكرة wool silk. parts.length يساوي 2. الزر يبقى hang.

يعمل الاثنان

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

السجلات: wool silk و2 وhang. silk لم تمسح wool. نقرة واحدة شغّلت القائمة بترتيب الإضافة.

انزع wool من المشجب

زر جديد. تُضاف الدالتان، ثم يُستدعى removeEventListener بدالة wool نفسها. تبقى silk. نقرة واحدة تشغّل silk فقط. التذكرة silk وليست wool silk. parts.length يساوي 1.

إزالة wool

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.removeEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

السجلات: silk و1 وhang. wool كانت نفس الكائن الذي أضفته، فغادرت القائمة. عرض الصفحة في الأسفل لا يزيل أحدًا.

سطر تحت المشجب

السكربت في آخر body، بعد وجود الزر والفقرتين. يضيف wool ثم silk ثم يستدعي click مرة. كل دالة تزيد hits بمقدار 1 وتدفع كلمتها. السطر يجمع نص التذكرة والعدد وpeg.id. لا يكتب نص الزر. ولا يقرأ وسيط حدث.

عرض الصفحة — المشجب

html 
<!DOCTYPE html>
<html>
<head>
<title>event-listeners — page</title>
</head>
<body>
<button id="peg" type="button">hang</button>
<p id="ticket">blank</p>
<p id="line">…</p>
<script>
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
let hits = 0;
function wool() {
hits = hits + 1;
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
hits = hits + 1;
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
document.getElementById("line").textContent =
ticket.textContent + " / " + hits + " / " + peg.id;
</script>
</body>
</html>

السطر هو wool silk / 2 / peg. التذكرة wool silk وليست blank. العدد 2 لأن المستمعين عملا في نقرة واحدة. الكلمة الأخيرة معرّف الزر، peg.id، لا كلمة hang. على الزر ما زال hang. الصفحة التالية هي كائن الحدث. تقرأ الوسيط الذي تخطته هذه الدوال.

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

  1. انقر بلا مستمع. التذكرة blank والزر hang.
  2. أضف wool ولا تنقر. التذكرة blank، وparts.length يساوي 0، والزر hang.
  3. أضف wool ثم انقر. التذكرة wool، والزر hang، وparts.length يساوي 1.
  4. أضف wool ثم silk ثم انقر مرة. التذكرة wool silk، وparts.length يساوي 2، والزر hang.
  5. أضف الاثنين، أزل wool، ثم انقر. التذكرة silk، وparts.length يساوي 1، والزر hang. اقرأ سطر الصفحة: wool silk / 2 / peg.

أين يخدعك هذا المشجب

على الزر ما زال hang. القائمة كانت تحمل الدالتين، أو silk فقط، أو لا أحد.

  • توقع أن addEventListener الثاني يستبدل الأول كما كان يفعل onclick
  • توقع أن addEventListener نفسه يغيّر التذكرة إلى wool
  • توقع أن silk وحدها تعمل حين يكون الاثنان مضافين
  • توقع أن نص الزر يصير wool
  • توقع أن removeEventListener بدالة جديدة يزيل wool
  • إضافة دالة wool نفسها مرتين وتوقع تشغيلين
  • قراءة onclick أو typeof null أو this.id هنا؛ ذلك كان صفحة الجرس
  • قراءة event.target هنا؛ هذه الدوال لا تأخذ وسيطًا وكائن الحدث هو الصفحة التالية
  • بناء الزر بـ createElement؛ ذلك كان صفحة أقدم
  • قراءة السطر كأنه blank / 0 / hang

ما يبقى معك

  • بلا مستمع، peg.click() يترك التذكرة blank والزر hang
  • addEventListener يترك التذكرة blank إلى حين click
  • نقرة واحدة مع wool فقط تجعل التذكرة wool وتترك الزر hang
  • wool ثم silk ثم نقرة واحدة تجعل التذكرة wool silk
  • removeEventListener بنفس wool ثم النقر يجعل التذكرة silk
  • wool نفسها مرتين تعمل مرة واحدة، والدالة الجديدة لا تزيلها
  • سطر الصفحة هو wool silk / 2 / peg

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

جاهز للبدء

اختبر معرفتك

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

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

📝 التعليمات

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