DOM و رویدادها · ۹ دقیقه مطالعه

رویدادها

گوش‌دادن به رویداد

btn.addEventListener("click", () => {
    console.log("کلیک شد");
});

رویدادهای پرکاربرد

"click"       کلیک
"input"       تغییر ورودی (هر کاراکتر)
"change"      تغییر و خروج از فیلد
"submit"      ارسال فرم
"keydown"     فشردن کلید
"mouseover"   عبور ماوس
"load"        بارگذاری صفحه

شیء event

input.addEventListener("input", (e) => {
    console.log(e.target.value);   // مقدار فعلی فیلد
});

جلوگیری از رفتار پیش‌فرض

form.addEventListener("submit", (e) => {
    e.preventDefault();   // جلوی ارسال و رفرش صفحه
    // حالا خودت با JS کنترل کن
});

مثال: شمارنده

let count = 0;
btn.addEventListener("click", () => {
    count++;
    output.textContent = count;
});

در پلی‌گراند، روی +۱ کلیک کن و در input تایپ کن تا رویدادها را زنده ببینی.

🧪

خودت امتحان کن

اجرا در مرورگرِ خودت — امن

کد را تغییر بده و «اجرا» را بزن. این کد فقط در مرورگر خودت اجرا می‌شود.

برای ثبت پیشرفت و کسب XP وارد شو.

ورود به میدان
→ DOM: دستکاری صفحه
تایمرها ←