رویدادها در DOM

در درس قبل توانستیم صفحه را تغییر دهیم، اما همهٔ تغییرات بلافاصله و بی‌سؤال انجام می‌شدند. برنامهٔ تعاملی یعنی برنامه‌ای که منتظر کاربر می‌ماند: کلیک، تایپ، حرکت موس. این‌ها در مرورگر «رویداد» (Event) نامیده می‌شوند: سیگنال‌هایی که مرورگر در واکنش به کارها صادر می‌کند و کد شما می‌تواند به آن‌ها گوش دهد و واکنش نشان دهد. الگوی همیشگی یک چیز است: «وقتی رویداد X روی عنصر Y رخ داد، تابع Z را اجرا کن».

گوش‌دادن با addEventListener

روی هر عنصر می‌توان با متد addEventListener برای یک رویداد «شنونده» (Listener) ثبت کرد. این سند کوچک را مبنای مثال‌ها بگیرید:

<button id="save">Save</button>
<input id="username" placeholder="Username" />
<p id="message"></p>

const button = document.querySelector("#save");

button.addEventListener("click", () => {
  console.log("Save button clicked");
});

پس از بازکردن صفحه، هر بار روی دکمه کلیک کنید، پیام در زبانهٔ Console چاپ می‌شود. اجزای این فراخوانی:

1. button — عنصری که به آن گوش می‌دهیم؛ شنونده روی همین عنصر ثبت می‌شود.
2. "click" — نام رویداد؛ رشته‌ای استثنایی است که کاملاً با حروف کوچک نوشته می‌شود. رویدادهای پرکاربرد: click، input، submit و keydown.
3. تابع پیکانی — «کد واکنش» یا همان مدیریت‌گر رویداد (Event Handler). مرورگر آن را نگه می‌دارد و هر بار که رویداد رخ دهد اجرا می‌کند.

این همان «تابع به‌عنوان مقدار» است که در درس توابع دیدیم: ما تابع را اجرا نمی‌کنیم، فقط می‌دهیمش به مرورگر تا در زمان درست اجرایش کند.

شیء رویداد

مرورگر هنگام اجرای مدیریت‌گر، شیء event را به آن می‌دهد؛ کارتِ کاملِ رویداد که همهٔ جزئیات را دارد: چه عنصری، چه زمانی و با چه داده‌ای:

const input = document.querySelector("#username");

input.addEventListener("input", (event) => {
  console.log(event.target.value);
});

رویداد input هر بار که کاربر در فیلد متنی چیزی تایپ یا پاک کند صادر می‌شود. در این مدیریت‌گر:

• event.target عنصری است که رویداد از آن سرچشمه گرفته — اینجا خود فیلد ورودی.
• event.target.value مقدار فعلی فیلد است؛ با هر تایپ، متن کاملِ لحظهٔ جاری در Console چاپ می‌شود.

این الگو — خواندن event.target.value و به‌روزکردن بخشی از صفحه — هستهٔ اغلب فرم‌های وب است.

یک برنامهٔ کوچک تعاملی

بگذارید همه را کنار هم بگذاریم: صفحه‌ای با یک فیلد، یک دکمه و جای پیام. کاربر نامش را می‌نویسد، دکمه را می‌زند و پیام خوش‌آمد ساخته می‌شود:

const input = document.querySelector("#username");
const button = document.querySelector("#save");
const message = document.querySelector("#message");

button.addEventListener("click", () => {
  const name = input.value;
  if (name === "") {
    message.textContent = "Please enter a name";
    message.style.color = "red";
    return;
  }
  message.textContent = `Welcome, ${name}!`;
  message.style.color = "green";
});

رفتار صفحه گام‌به‌گام: کلیک روی دکمه مدیریت‌گر را اجرا می‌کند؛ مقدار فیلد خوانده می‌شود؛ اگر خالی باشد پیام سرخِ هشدار می‌آید و return تابع را همان‌جا تمام می‌کند؛ در غیر این صورت پیام سبز خوش‌آمد با رشتهٔ قالبی ساخته می‌شود. به این کد خوب دقت کنید — شرط‌ها، رشته‌های قالبی، اشیاء و توابع، همه‌چیزِ دوره تا اینجا در یک مدیریت‌گر رویداد جمع شده است.

تمرین‌ها

// Write your code here

const button = document.querySelector("#theme");
const body = document.querySelector("body");

let dark = false;
button.addEventListener("click", () => {
  dark = !dark;
  body.style.background = dark ? "#222" : "#fff";
});

:::

خلاصه

• رویداد سیگنالی است از مرورگر دربارهٔ کاری که رخ داده؛ کلیک، تایپ و ارسال فرم همگی رویدادند.
• addEventListener("click", fn) تابع واکنش را به عنصر و رویداد وصل می‌کند؛ خود تابع را شما نمی‌خوانید، مرورگر در وقت مناسب اجرا می‌کند.
• شیء event جزئیات رویداد را دارد و event.target.value راه خواندن مقدار عناصر ورودی است.
• در submit فرم، event.preventDefault() بارگذاری دوبارهٔ صفحه را متوقف می‌کند.

برنامهٔ ما تعامل‌پذیر شد؛ اما به‌محض اینکه به شبکه یا انتظار نیاز بیاوریم، با مساله‌ای جدید روبه‌رو می‌شویم: کدی که نتایجش با تأخیر می‌رسند. در درس بعدی، آخرین مفهوم بزرگ دوره، برنامه‌نویسی ناهمگم را می‌آموزیم.