HTML Events رویدادهایی است که برای المان های HTML رخ می دهد.
وقتی از جاوااسکریپت برای طراحی سایت استفاده می شود ، جاوااسکریپت می تواند به آن رویدادها واکنش نشان دهد.
یک رویداد HTML می تواند کاری باشد که مرورگر قرار است به انجام برساند یا کاری که یک کاربر انجام می دهد.
مثالي از event ها:
- كليك موس
- زماني كه يك صفحه يا يك عكس بارگذاري مي شود
- موس بر روي يك نقطه خاص بر روي صفحه برود
- انتخاب كردن يك فيلد ورودي در فرم HTML
- فرستادن يك فرم HTML
- يك بار كليك كردن
اغلب وقتی طراحی سایت انجام می دهیم نیاز داریم وقتی یک رویداد اتفاق افتاد کاری انجام شود. برای این مهم JavaScript به شما اجازه می دهد وقتی event رخ داد کدی را اجرا کنید.
HTML اجازه می دهد مشخصه های event handler همراه با کد جاوااسکریپت به المان های HTML اضافه شود.
<some-HTML-element some-event='some JavaScript'>
در مثال بعدی یک مشخصه onclick همراه با کد به یک المان کلید اضافه شده است:
<button onclick='document.getElementById("demo").innerHTML=Date()'>The time is?</button>
در مثال بالا کد JavaScript مقدار المان با ” id=”demo را تغییر می دهد.
در مثال بعدی کد JavaScript مقدار خود المان اصلی را توسط دستور this.innerHTML تغییر می دهد:
<button onclick='this.innerHTML=Date()'>The time is?</button>
معمولا کدهایی که در طراحی وب سایت استفاده می شوند بیشتر از یک خط است و بهتر است در این مواقع یک تابع فرخوانی شود:
<button onclick="displayDate()">The time is?</button>
توجه کنید که در مثال قبل تابع displayDate به محض رخ دادن رویداد click فراخوانی خواهد شد.
و نکته دیگر مثال اینکه به جای ‘ از ” استفاده شد.
رویدادهای رایج HTML
در ادامه فهرستی از بعضی رویدادهای رایج HTML که در طراحی سایت استفاده می شوند نمایش داده شده است:
رویداد / event | توضیح |
---|---|
onchange | یک المان HTML تغییر کرده است |
onclick | کاربر روی یک المان HTML کلیک کرده است |
onmouseover | کاربر نشان گر موس را روی یک المان HTML حرکت داده است |
onmouseout | کاربر نشان گر موس از روی یک المان HTML کنار برده است |
onkeydown | کاربر یک کلید کیبورد را فشرده است |
onload | مرورگر لود صفحه را به اتمام رسانده است |
این لیست بسیار طولانی تر از آن است که می بینید برای کسب اطلاعات بیشتر به مرجع HTML DOM مراجعه نمایید.
JavaScript چه کارهایی می تواند انجام دهد؟
اداره کننده رویدادها می توانند برای اداره کردن و اعتبارسنجی ورودی دریافتی از کاربر ، فعالیت های کاربر و کارهایی که مرورگر ممکن انجام دهد استفاده شوند:
- کارهایی که باید همیشه وقتی یک صفحه بارگذاری شد انجام شود
- کارهایی که باید وقتی یک صفحه سایت بسته شد انجام شود
- کاری که وقتی کاربر روی یک دکمه کلیک می کند باید انجام شود
- محتوایی که بعد از تکمیل توسط کاربر باید اعتبارسنجی شود
- و …
روش های مختلفی برای اینکه JavaScript بتواند با رویدادها کار کند قابل استفاده است:
- مشخصه های رویداد HTML می توانند مستقیما کد JavaScript را اجرا کنند
- مشخصه های رویداد HTML می توانند یک تابع را فراخوانی کنند
- شما می توانید اداره کننده رویداد خودتان را به المان های HTML اختصاص دهید
- حتی می توانید جلوی ارسال رویدادها یا جلوی اداره شدن رویدادها را بگیرید.