در حال بارگذاری...

شنودگر رویداد

توی رختکن یک چوب‌لباسی است. دکمه #peg است و رویش نوشته hang. زیرش بند #ticket هنوز می‌گوید blank.
صفحهٔ قبل زنگ در بود و ویژگی onclick. آنجا یک جا بیشتر نبود. تابع دوم که می‌آمد، اولی می‌رفت. اینجا آن ویژگی را نمی‌نویسیم. typeof و this هم مال همان صفحه است.
حرف این صفحه addEventListener است. تابع را به فهرست کلیک دکمه اضافه می‌کند. همان خط اجرا نمی‌شود. تا peg.click() نزنی، بلیت همان blank می‌ماند.
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، یک click هر دو، اول wool بعد silk wool silk اجرای فقط دومی
removeEventListener برای wool، بعد click silk silk اجرای هر دو
اسکریپت صفحه، یک click هر دو wool silk تمام شدن خط با hang

addEventListener("click", wool) نام wool را ته فهرست کلیک می‌گذارد. صدایش نمی‌زند. peg.click() کلیک را می‌فرستد و فهرست را از سر اجرا می‌کند. متن خود دکمه عوض نمی‌شود.
silk را که بعداً اضافه کنی، پشت wool می‌نشیند. هر دو اجرا می‌شوند. ترتیب همان ترتیب اضافه کردن است.
شیء تابع را دو بار اضافه نمی‌کنی. peg.addEventListener("click", wool) و دوباره همان خط، فهرست را یکی نگه می‌دارد. یک کلیک، wool یک بار. parts.length می‌شود ۱ و بلیت wool است.
removeEventListener("click", wool) همان شیء را برمی‌دارد. اگر silk را گذاشته باشی، silk می‌ماند. تابع نویی که بدنش هم "wool" را push کند، جور نیست. بعد از 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 برابر ۱ است.

یک شنونده

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، و تازه آن‌وقت یک click. بین دو اضافه کردن کلیکی نیست. wool واژهٔ "wool" را می‌گذارد و می‌نویسد. silk واژهٔ "silk" را می‌گذارد و هر دو را با فاصله می‌نویسد. بلیت wool silk است. parts.length برابر ۲ است. دکمه 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 می‌ماند. یک click فقط silk را اجرا می‌کند. بلیت silk است، نه wool silk. parts.length برابر ۱ است.

برداشتن 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 اضافه می‌کند و واژهٔ خودش را push می‌کند. خط، متن بلیت و تعداد و 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. شمارش ۲ است، چون هر دو شنونده روی همان یک کلیک اجرا شدند. واژهٔ آخر شناسهٔ دکمه است، peg.id، نه واژهٔ hang. روی دکمه هنوز hang نوشته. صفحهٔ بعد شیء رویداد است. همان آرگومانی را می‌خواند که این تابع‌ها نگرفته‌اند.

پنج بار چک کن

  1. بدون شنونده کلیک کن. بلیت blank است و دکمه hang.
  2. wool را اضافه کن و کلیک نکن. بلیت blank است، parts.length برابر ۰ است، دکمه hang است.
  3. wool را اضافه کن و کلیک کن. بلیت wool است، دکمه hang است، parts.length برابر ۱ است.
  4. wool و بعد silk را اضافه کن و یک بار کلیک کن. بلیت wool silk است، parts.length برابر ۲ است، دکمه hang است.
  5. هر دو را اضافه کن، wool را بردار، بعد کلیک کن. بلیت silk است، parts.length برابر ۱ است، دکمه 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 تا پیش از click بلیت را blank نگه می‌دارد
  • یک کلیک فقط با wool بلیت را wool می‌کند و دکمه hang می‌ماند
  • اول wool بعد silk، بعد یک کلیک، بلیت را wool silk می‌کند
  • removeEventListener با همان wool، بعد کلیک، بلیت را silk می‌کند
  • همان wool اگر دو بار اضافه شود یک بار اجرا می‌شود، و تابع تازه برش نمی‌دارد
  • خط صفحه می‌شود wool silk / 2 / peg

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 50 از 52
Javascript آموزش