JavaScript:رویدادها در جاوااسکریپت
رویداد HTML "چیزهایی" هستند که برای عناصر HTML ای اتفاق می‌افتد. [۱]
زمانیکه شما از جاوااسکریپت درون صفحات HTML استفاده می‌کنید، جاوااسکریپت می‌تواند به این رویدادها "واکنش" نشان دهد.
محتویات
رویدادها در HTML
یک رویداد در HTML می‌تواند کاری باشد که مرورگر انجام می‌دهد یا کاری باشد که یک کاربر انجام می‌دهد.
در زیر می‌توانید مثال‌هایی از رویدادها در HTML را ببینید:
- زمانیکه بارگذاری یک صفحه HTML به طور کامل به پایان می‌رسد.
- زمانیکه یک مقدار فیلد ورود داده (به انگلیسی: input field) تغییر می‌کند.
- زمانیکه بر روی یک دکمه HTML ای کلیک می‌شود.
اغلب، زمانیکه یک رویداد رخ می‌دهد، شما می‌خواهید یک کاری را انجام دهید.
جاوااسکریپت به شما این اجازه را می‌دهد که کدهای خود را زمانیکه رویدادهای مد نظر شما اتفاق افتاد، اجرا کنید.
زبان HTML به شما اجازه می‌دهد که به وسیلهٔ کدهای جاوااسکریپت و خاصیت‌هایی برای مدیریت رویداد (به انگلیسی: event handler) که در HTML وجود دارند، رویدادهای عناصر مختلف را مدیریت کنید:
با علامت تک کوتیشن «'»:
<element event='some JavaScript'>
با دو کوتیشن «"»:
<element event="some JavaScript">
در مثال زیر، ویژگیonclick(با کد)، به یک عنصر<button>در HTML اضافه شده‌است:
مثال
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
در مثال بالا، کد جاوااسکریپت محتوای عنصر را که id (به فارسی: شناسه) آن برابر با کلمهٔ "demo" است را تغییر می‌دهد.
در مثال بعدی، کد ما محتوای عنصر HTML مربوط به خود را (با استفاده از دستورthis.innerHTML) تغییر می‌دهد:
مثال
<button onclick="this.innerHTML = Date()">The time is?</button>
 | کدهای جاوااسکریپت معمولاً طولانی بوده و در چندین خط نوشته می‌شوند. فراخوانی توابع در attributes (به فارسی: خاصیت) event (به فارسی: رویداد) عنصر بسیار روش مناسبتری است: |
مثال
<button onclick="displayDate()">The time is?</button>
رویدادهای پر استفادهٔ HTML
در اینجا می‌توانید لیستی از رویدادهای پر استفاده در HTML را ببینید:
| توضیحات | رویداد |
|---|---|
| زمانیکه محتوای یک عنصر HTML تغییر می‌کند. | Onchange |
| زمانیکه کاربر بر روی یک عنصر HTML کلیک می‌کند. | Onclick |
| زمانیکه کاربر موس خود را روی یک عنصر HTML می‌برد. | Onmouseover |
| زمانیکه کاربر موس خود را از محدوده یک عنصر HTML خارج می‌کند. | Onmouseout |
| زمانیکه کاربر یک کلید از کیبرد را می‌فشارد. | Onkeydown |
| زمانیکه بارگذاری صفحه به طور کامل پایان می‌پذیرد. | Onload |
لیست مرجع وب سایت: Wikicod در مورد رویدادهای HTML DOM در جاوااسکریپت بسیار طولانی‌تر است.
جاوااسکریپت چه کاری می‌تواند انجام دهد؟
رویدادها می‌توانند برای مدیریت و بررسی صحت و سقم مواردی همچون: داده‌ای که کاربر به عنوان ورودی وارد می‌کند، کارهایی که کاربر و مرورگر انجام می‌دهند استفاده شوند:
- کارهایی که باید هر دفعه که صفحه بارگذاری شد، انجام شوند.
- کارهایی که می‌بایست زمانیکه صفحه بسته شد، انجام شوند.
- عملی که می‌بایست زمانیکه کاربر روی یک دکمه کلیک می‌کند انجام شود.
- محتوایی که می‌بایست زمانیکه کاربر دادهٔ ورودی خود را وارد می‌کند، بررسی شود.
- و …
روشهای گوناگونی می‌توانند استفاده شوند تا به جاوااسکریپت این اجازه را بدهد که با رویدادها کار کند:
- خاصیت (به انگلیسی: attributes)، رویداد (به انگلیسی: event) در HTML می‌تواند کدهای جاوااسکریپت را به صورت مستقیم اجرا کند.
- ویژگی رویداد (به انگلیسی: event) در HTML می‌تواند توابع جاوااسکریپت را فراخوانی کند.
- شما می‌توانید مدیریت‌کنندهٔ رویداد (به انگلیسی: event handler) خود را به عناصر HTML اضافه کنید.
- شما می‌توانید از رخ‌دادن رویدادها یا مدیریت آن‌ها جلوگیری کنید.
- و …
شما مطالب بیشتری را در مورد رویدادها و مدیریت‌کنندهٔ رویدادها در فصل HTML DOM خواهید آموخت.
منابع آموزشی