رویدادها
رویداد 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>
مثال
<button onclick="displayDate()">The time is?</button>
رویدادهای پر استفادهٔ HTML
در اینجا میتوانید لیستی از رویدادهای پر استفاده در HTML را ببینید:
توضیحات | رویداد |
---|---|
زمانیکه محتوای یک عنصر HTML تغییر میکند. | Onchange |
زمانیکه کاربر بر روی یک عنصر HTML کلیک میکند. | Onclick |
زمانیکه کاربر موس خود را روی یک عنصر HTML میبرد. | Onmouseover |
زمانیکه کاربر موس خود را از محدوده یک عنصر HTML خارج میکند. | Onmouseout |
زمانیکه کاربر یک کلید از کیبرد را میفشارد. | Onkeydown |
زمانیکه بارگذاری صفحه به طور کامل پایان میپذیرد. | Onload |
لیست مرجع وبسایت wikicod.ir در مورد رویدادهای HTML DOM در جاوا اسکریپت بسیار طولانیتر است.
جاوا اسکریپت چه کاری میتواند انجام دهد؟
رویدادها میتوانند برای مدیریت و بررسی صحت و سقم مواردی همچون: دادهای که کاربر به عنوان ورودی وارد میکند، کارهایی که کاربر و مرورگر انجام میدهند استفاده شوند:
- کارهایی که باید هر دفعه که صفحه بارگذاری شد، انجام شوند
- کارهایی که میبایست زمانیکه صفحه بسته شد، انجام شوند
- عملی که میبایست زمانیکه کاربر روی یک دکمه کلیک میکند انجام شود
- محتوایی که میبایست زمانیکه کاربر دادهٔ ورودی خود را وارد میکند، بررسی شود
- و …
روشهای گوناگونی میتوانند استفاده شوند تا به جاوا اسکریپت این اجازه را بدهد که با رویدادها کار کند:
- خاصیت (به انگلیسی: attributes)، رویداد (به انگلیسی: event) در HTML میتواند کدهای جاوا اسکریپت را به صورت مستقیم اجرا کند
- ویژگی رویداد (به انگلیسی: event) در HTML میتواند توابع جاوا اسکریپت را فراخوانی کند
- شما میتوانید مدیریتکنندهٔ رویداد (به انگلیسی: event handler) خود را به عناصر HTML اضافه کنید
- شما میتوانید از رخدادن رویدادها یا مدیریت آنها جلوگیری کنید
- و …
شما مطالب بیشتری را در مورد رویدادها و مدیریتکنندهٔ رویدادها در فصل HTML DOM خواهید آموخت.
تمرینات جاوا اسکریپت
ساخت نمونه مثال این بخش در دست اقدام است.
منابع آموزشی