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

رویدادها

کنار در آپارتمان یک زنگ است. دکمه #bell است و رویش نوشته press. زیرش بند #chime هنوز می‌گوید silent. توی HTML ویژگی onclick نداریم. برای همین bell.onclick از اول null است.
یک دام قدیمی: typeof null در JavaScript می‌شود "object". پس typeof bell.onclick هم "object" است. نه "null" و نه "undefined". مقایسهٔ bell.onclick === null درست است.
تابع را که بگذاری توی onclick، زنگ همان لحظه صدا نمی‌دهد. متن chime همان silent می‌ماند تا bell.click() همان تابع را اجرا کند. این ویژگی یک جا بیشتر ندارد. تابع دوم را که بنویسی، اولی می‌رود. با یک کلیک هر دو اجرا نمی‌شوند. addEventListener مال صفحهٔ بعد است. آنجا چند شنونده روی هم می‌نشینند. اینجا صدایش نمی‌زنیم.
bell.onclick = null جا را خالی می‌کند. بعد از آن click متن را دست نمی‌زند. داخل تابع، this خود دکمه است و this.id می‌شود bell. نوشتهٔ روی دکمه همان press می‌ماند. اسکریپت صفحه یک بار click می‌زند. خط زیر زنگ این است: dong / 1 / bell. اینجا عنصر نمی‌سازی و به استایل دست نمی‌زنی.

یک جا روی دکمه

صفحهٔ قبل با createElement ردیف li می‌ساخت و با append و prepend و insertBefore جایش می‌داد. اینجا گره نمی‌سازی و children را نمی‌خوانی. صفحهٔ پیش از آن روی تراشهٔ رنگ style و classList نوشت. اینجا به style مقدار نمی‌دهی. getElementById فقط دکمه و بند زیرش را به دستت می‌دهد. حرف تازه همان ویژگی onclick است: یا یک تابع، یا null.

توی جا چیست

دکمه با press شروع می‌شود و زیرش silent است. ردیف‌ها را به ترتیب بخوان. هر قطعه از همین دکمهٔ تازه شروع می‌شود، جز ردیف صفحه که مال نمایش پایین است. آن نمایش null نمی‌گذارد.

📊 توی جا چیست

لحظه داخل onclick متن زنگ لغزش رایج
پیش از هر مقداردهی null؛ typeof برابر "object" silent خواندن typeof به شکل "null"
بعد از تابع ding و پیش از click یک تابع silent خیال اینکه خود مقداردهی زنگ را می‌زند
بعد از click با ding همان تابع ding عوض شدن متن دکمه به ding
dong جای ding را می‌گیرد، بعد یک click تابع dong، نه ding dong اجرای هر دو تابع
onclick = null و بعد click، دکمهٔ تازه null؛ typeof برابر "object" silent زنگ خوردن جای خالی
اسکریپت صفحه، یک click یک تابع؛ this.id برابر bell dong تمام شدن خط با silent

onclick ویژگی خود عنصر است. تا هندلری نباشد، مقدارش null است و typeof null باز هم "object" است. اگر می‌خواهی بدانی جا خالی است، === null را بزن. مقداردهی فقط تابع را نگه می‌دارد. صدایش نمی‌زند. bell.click() یک کلیک می‌فرستد و همان تابعی را اجرا می‌کند که همان لحظه در جاست. متن خود دکمه عوض نمی‌شود. مقداردهی دوم روی ویژگی می‌نویسد. اگر برای تابع اول اسم نگه داشته باشی، آن شیء در حافظه هست، ولی ویژگی دیگر به آن اشاره نمی‌کند. onclick = null هندلر را برمی‌دارد. ویژگی onclick در HTML هم همین جا را پر می‌کرد؛ این دکمه چنان ویژگی‌ای ندارد. تابع پیکانی در این جا this را دکمه نمی‌کند. این صفحه تابع معمولی می‌گذارد.

جا از اول خالی است

فایل با دکمه و بند باز می‌شود. هنوز چیزی نگذاشته‌ای. این چهار خروجی سراغ خود ویژگی، typeof آن، متن زنگ، و نوشتهٔ روی دکمه می‌روند.

زنگ ساکت

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.textContent);

خروجی‌ها: null، object، silent، و press. جا خالی است. typeof واژهٔ null را چاپ نمی‌کند. دکمه و بند هنوز همان واژه‌های نشانه را نشان می‌دهند.

تابع منتظر می‌ماند

onclick = function ... تابع را نگه می‌دارد. بدنه همان خط اجرا نمی‌شود. زنگ هنوز silent است و ویژگی دیگر null نیست.

بگذار، نزن

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.onclick === null);

خروجی‌ها: function، silent، و false. تابع را توی جا می‌بینی. بند عوض نشده، چون کسی تابع را صدا نزده.

click همان یکی را اجرا می‌کند

bell.click() هندلر فعلی را اجرا می‌کند. زنگ می‌شود ding. متن دکمه press می‌ماند. بعد از کلیک هم جا هنوز تابع دارد.

یک بار بزن

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
bell.click();
console.log(chime.textContent);
console.log(bell.textContent);
console.log(typeof bell.onclick);

خروجی‌ها: ding، press، و function. یک کلیک، یک تغییر، و تغییر مال بند است. واژهٔ press هنوز مال دکمه است.

تابع دوم جای اولی را می‌گیرد

این قطعه دوباره از دکمهٔ تازه شروع می‌شود. اول ding ذخیره می‌شود، بعد dong رویش می‌نشیند، و تازه بعدش یک click می‌آید. بین دو مقداردهی کلیکی نیست، پس در این اجرا زنگ هرگز ding نمی‌شود. بعد از کلیک می‌شود dong. bell.onclick === ding برابر false است. bell.onclick === dong برابر true است.

تابع دوم می‌ماند

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
function ding() {
chime.textContent = "ding";
}
function dong() {
chime.textContent = "dong";
}
bell.onclick = ding;
bell.onclick = dong;
bell.click();
console.log(bell.onclick === ding);
console.log(bell.onclick === dong);
console.log(chime.textContent);

خروجی‌ها: false، true، و dong. اسم ding هنوز به یک تابع اشاره می‌کند. ویژگی دیگر نه. یک کلیک فقط dong را اجرا کرد.

null جا را خالی می‌کند

این را روی دکمهٔ تازه بزن. تابع را می‌گذاری و پیش از هر کلیک پاکش می‌کنی. bell.click() بعد از null واژهٔ dong را نمی‌نویسد. زنگ silent می‌ماند. typeof دوباره object است، چون مقدار null است.

خالی کردن جا

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "dong";
};
bell.onclick = null;
bell.click();
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);

خروجی‌ها: null، object، و silent. تابعی که dong می‌نوشت، لحظهٔ کلیک توی جا نیست. نمایش صفحه، پایین‌تر، جا را خالی نمی‌کند.

یک خط زیر زنگ

اسکریپت ته body است، بعد از دکمه و بند. یک تابع می‌گذارد و یک بار click می‌زند. داخل تابع، taps از ۰ به ۱ می‌رسد، زنگ می‌شود dong، و this.id می‌رود توی bell.dataset.who. خط، متن زنگ و تعداد و همان id را به هم می‌چسباند. متن دکمه را در خط نمی‌آورد.

نمایش صفحه — زنگ در

html 
<!DOCTYPE html>
<html>
<head>
<title>events — page</title>
</head>
<body>
<button id="bell" type="button">press</button>
<p id="chime">silent</p>
<p id="line">…</p>
<script>
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
let taps = 0;
bell.onclick = function () {
taps = taps + 1;
chime.textContent = "dong";
bell.dataset.who = this.id;
};
bell.click();
document.getElementById("line").textContent =
chime.textContent + " / " + taps + " / " + bell.dataset.who;
</script>
</body>
</html>

خط می‌شود dong / 1 / bell. زنگ dong است، نه silent. عدد ۱ است، چون اسکریپت یک بار کلیک می‌زند. نشانهٔ آخر id دکمه است، از this داخل هندلر، نه واژهٔ press. روی دکمه هنوز press است. صفحهٔ بعد شنودگر رویداد است. ابزار اصلی‌اش این تک‌جا از onclick نیست.

پنج بار خودت چک کن

  1. onclick و typeof bell.onclick و متن زنگ و متن دکمه را ببین. این‌هاست: null، object، silent، و press.
  2. تابع ding را بگذار و کلیک نزن. typeof می‌شود function، زنگ silent می‌ماند، و onclick === null برابر false است.
  3. با همان تابع ding، bell.click() را بزن. زنگ ding است، دکمه press است، و typeof برابر function است.
  4. اول ding، بعد dong، بعد یک کلیک. onclick === ding برابر false است، onclick === dong برابر true است، و زنگ dong است.
  5. روی دکمهٔ تازه تابع بگذار، onclick را null کن، بعد کلیک بزن. این‌هاست: null، object، و silent. خط صفحه این است: dong / 1 / bell.

این زنگ کجا گولت می‌زند

روی دکمه هنوز press است. یا تابع اشتباه توی جا بوده، یا جا خالی بوده.

  • خواندن typeof bell.onclick به شکل "null" در حالی که مقدار null است
  • انتظار اینکه خود مقداردهی، زنگ را ding کند
  • انتظار اینکه بعد از مقداردهی دوم، هم ding و هم dong با یک کلیک اجرا شوند
  • انتظار اینکه متن دکمه ding شود
  • انتظار اینکه بعد از onclick = null هنوز click متن زنگ را عوض کند
  • تابع پیکانی و انتظار اینکه this.id برابر bell باشد
  • خواندن event.target اینجا؛ این تابع‌ها آرگومان نمی‌گیرند و شیء رویداد مال صفحهٔ بعدتر است
  • صدازدن addEventListener اینجا؛ صفحهٔ بعد شنونده‌ها را روی هم می‌گذارد
  • ساختن دکمه با createElement؛ آن کار مال صفحهٔ قبل بود
  • خواندن خط به شکل silent / 0 / press

این‌ها را با خودت ببر

  • تا هندلری نباشد، bell.onclick برابر null است و typeof bell.onclick برابر object است
  • گذاشتن تابع، زنگ را تا click همان silent نگه می‌دارد
  • bell.click() با تابع ding زنگ را ding می‌کند و دکمه را press می‌گذارد
  • مقداردهی دوم جای اولی را می‌گیرد، پس یک کلیک فقط dong را اجرا می‌کند
  • onclick = null و بعد click روی دکمهٔ تازه، زنگ را silent می‌گذارد
  • خط صفحه می‌شود dong / 1 / bell و this.id داخل هندلر برابر bell است

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

آماده شروع

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

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

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

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

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