اچ‌تی‌ام‌ال/رویدادها

مقدمه	بندها	قلم	پیوند	تصاویر	رسانه‌ها
فریم	جدول‌بندی	یادداشت‌ها	تقسیم‌بندی (div)	فهرست‌بندی‏	رویدادها
سربرگ (هدر)	پابرگ (فوتر)	پیوند ناوبری	سبک‌ها	فهرست تگ‌ها‏	‎‏سرمتن‌ها‏
‎‏عنصرها‏

مقدمه

رویدادهای اچ‌تی‌ام‌ال (HTML Events) مکانیزم‌هایی هستند که امکان پاسخ‌گویی به تعاملات کاربر یا تغییرات در محیط مرورگر را در صفحات وب فراهم می‌کنند. این رویدادها توسط مرورگر تولید می‌شوند و می‌توانند با استفاده از جاوااسکریپت مدیریت شوند تا صفحات وب پویا و تعاملی ایجاد شود. برای مثال، کلیک کاربر روی یک دکمه یا تایپ در یک فیلد متنی می‌تواند رویدادی را فعال کند که به اجرای کد خاصی منجر شود. رویدادها بخش اساسی توسعه وب مدرن هستند و در کنار اچ‌تی‌ام‌ال و جاوااسکریپت، تجربه کاربری غنی را ممکن می‌سازند.

تعریف رویدادها

رویداد در اچ‌تی‌ام‌ال به هر عملی گفته می‌شود که در مرورگر رخ می‌دهد و قابل شناسایی و پردازش است. این عملیات می‌توانند ناشی از اقدامات کاربر (مانند کلیک یا تایپ)، تغییرات در صفحه (مانند بارگذاری کامل یک تصویر)، یا خطاهای سیستمی باشند. رویدادها معمولاً با استفاده از ویژگی‌های اچ‌تی‌ام‌ال (مانند onclick) یا متدهای جاوااسکریپت مانند addEventListener مدیریت می‌شوند.

انواع رویدادهای اچ‌تی‌ام‌ال

رویدادهای اچ‌تی‌ام‌ال به دسته‌های مختلفی تقسیم می‌شوند که هر یک برای سناریوهای خاصی طراحی شده‌اند. در زیر مهم‌ترین انواع رویدادها آورده شده است:

رویدادهای پنجره

این رویدادها با شیء پنجره مرورگر (مرتبط با تگ <body>) مرتبط هستند. مثال‌ها:

onload: هنگام بارگذاری کامل صفحه.
onresize: هنگام تغییر اندازه پنجره مرورگر.
onscroll: هنگام پیمایش صفحه.

رویدادهای فرم

رویدادهای مرتبط با عناصر فرم مانند <input> یا <select>. مثال‌ها:

onsubmit: هنگام ارسال فرم.
onchange: هنگام تغییر مقدار یک عنصر.
onfocus: هنگام تمرکز روی یک عنصر.

رویدادهای ماوس

رویدادهایی که توسط ماوس کاربر فعال می‌شوند. مثال‌ها:

onclick: هنگام کلیک روی یک عنصر.
onmouseover: هنگام حرکت ماوس روی یک عنصر.
ondblclick: هنگام دابل‌کلیک.

رویدادهای صفحه‌کلید

رویدادهای مرتبط با صفحه‌کلید. مثال‌ها:

onkeydown: هنگام فشار دادن کلید.
onkeyup: هنگام رها کردن کلید.

رویدادهای رسانه

رویدادهای مرتبط با عناصر رسانه‌ای مانند <video> یا <audio>. مثال‌ها:

onplay: هنگام شروع پخش.
onerror: هنگام بروز خطا در بارگذاری.

نحوه استفاده از رویدادها

رویدادها در اچ‌تی‌ام‌ال به دو روش اصلی مدیریت می‌شوند:

استفاده از ویژگی‌های رویداد

ویژگی‌های رویداد به صورت مستقیم در تگ‌های اچ‌تی‌ام‌ال اضافه می‌شوند. مثال:

<button onclick="alert('دکمه کلیک شد!')">کلیک کنید</button>

این روش ساده است اما برای پروژه‌های بزرگ به دلیل ترکیب کد اچ‌تی‌ام‌ال و جاوااسکریپت توصیه نمی‌شود.

استفاده از addEventListener

این روش مدرن‌تر است و امکان جداسازی کد جاوااسکریپت از اچ‌تی‌ام‌ال را فراهم می‌کند. مثال:

<button id="myButton">کلیک کنید</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
    alert("دکمه کلیک شد!");
});
</script>

مثال‌های کاربردی

در ادامه چند مثال عملی برای درک بهتر رویدادها ارائه شده است:

مثال ۱: تغییر متن با کلیک

این مثال نشان می‌دهد چگونه با کلیک روی یک دکمه، متن یک پاراگراف تغییر کند.

<p id="myText">متن اولیه</p>
<button id="changeText">تغییر متن</button>
<script>
document.getElementById("changeText").addEventListener("click", function() {
    document.getElementById("myText").innerText = "متن جدید!";
});
</script>

مثال ۲: اعتبارسنجی فرم

این مثال از رویداد onsubmit برای جلوگیری از ارسال فرم در صورت خالی بودن فیلد استفاده می‌کند.

<form id="myForm">
    <input type="text" id="name" placeholder="نام">
    <button type="submit">ارسال</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
    let name = document.getElementById("name").value;
    if (name === "") {
        event.preventDefault();
        alert("لطفاً نام را وارد کنید!");
    }
});
</script>

مثال ۳: ردیابی حرکت ماوس

این مثال نشان می‌دهد چگونه با حرکت ماوس روی یک عنصر، رنگ پس‌زمینه آن تغییر کند.

<div id="myDiv" style="width:200px; height:200px; background-color:lightgray;">
    ماوس را اینجا ببرید
</div>
<script>
let div = document.getElementById("myDiv");
div.addEventListener("mouseover", function() {
    div.style.backgroundColor = "lightblue";
});
div.addEventListener("mouseout", function() {
    div.style.backgroundColor = "lightgray";
});
</script>

مثال ۴: شمارش کلیدها

این مثال تعداد دفعات فشار کلید را با رویداد onkeydown نمایش می‌دهد.

<p>تعداد فشار کلید: <span id="keyCount">0</span></p>
<input type="text" id="inputField">
<script>
let count = 0;
document.getElementById("inputField").addEventListener("keydown", function() {
    count++;
    document.getElementById("keyCount").innerText = count;
});
</script>

مفاهیم پیشرفته

انتشار رویداد

رویدادها در دو فاز منتشر می‌شوند: گیراندازی (Capturing) و حباب‌سازی (Bubbling). می‌توان با event.stopPropagation() انتشار را متوقف کرد.

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

با استفاده از event.preventDefault() می‌توان رفتار پیش‌فرض مرورگر (مانند باز شدن لینک) را متوقف کرد. مثال:

document.querySelector("a").addEventListener("click", function(event) {
    event.preventDefault();
    alert("لینک غیرفعال شد!");
});

نکات و بهترین روش‌ها

از addEventListener به جای ویژگی‌های درون‌خطی استفاده کنید.
تعداد کنترل‌کننده‌های رویداد را محدود کنید تا عملکرد صفحه حفظ شود.
برای رویدادهای پیچیده، از کتابخانه‌هایی مانند jQuery یا فریم‌ورک‌هایی مانند React استفاده کنید.
سازگاری رویدادها با مرورگرهای مختلف را بررسی کنید.

منابع

مستندات MDN Web Docs برای رویدادهای اچ‌تی‌ام‌ال
استانداردهای W3C برای اچ‌تی‌ام‌ال و جاوااسکریپت
آموزش‌های W3Schools برای مثال‌های عملی