رویدادهای HTML
رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار کاربر یا عملکرد مرورگر باشند.
مثال‌هایی از رویدادهای HTML:
- بارگذاری کامل صفحه وب.
- تغییر مقدار یک فیلد ورودی.
- کلیک روی یک دکمه.
جاوااسکریپت می‌تواند با شناسایی این رویدادها کدی را اجرا کند.
افزودن رویدادها به HTML
می‌توانید از ویژگی‌های رویداد (Event Attributes) در HTML برای اجرای کد جاوااسکریپت استفاده کنید.
روش تعریف:
- با استفاده از تک‌کوتیشن:
<element event='some JavaScript'>- با استفاده از دابل‌کوتیشن:
<element event="some JavaScript">مثال ساده:
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>در اینجا:
- کد جاوااسکریپت محتوای عنصری با
id="demo"را تغییر می‌دهد.
استفاده از this در رویدادها
می‌توانید از this برای اشاره به عنصری که رویداد روی آن رخ داده است استفاده کنید.
مثال:
<button onclick="this.innerHTML = Date()">The time is?</button>در این مثال، متن دکمه با مقدار تاریخ جایگزین می‌شود.
فراخوانی توابع در رویدادها
اغلب کد جاوااسکریپت طولانی است و به جای نوشتن مستقیم آن، از توابع استفاده می‌شود.
مثال:
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById('demo').innerHTML = Date();
}
</script>رویدادهای رایج در HTML
مدیریت رویدادها با جاوااسکریپت
مدیریت رویدادها برای بررسی و واکنش به ورودی کاربر، عملیات مرورگر و … استفاده می‌شود.
موارد استفاده از مدیریت رویداد:
- اقداماتی که باید هنگام بارگذاری صفحه انجام شوند.
- عملیاتی که هنگام بسته شدن صفحه باید انجام شوند.
- واکنش به کلیک کاربر روی دکمه.
- بررسی محتوای ورودی توسط کاربر.
روش‌های کار با رویدادها:
- اجرای مستقیم کد جاوااسکریپت از طریق ویژگی رویداد HTML.
- فراخوانی توابع جاوااسکریپت از طریق ویژگی رویداد HTML.
- تخصیص دستی متدهای مدیریت رویداد به عناصر HTML.
- جلوگیری از ارسال یا مدیریت برخی رویدادها.
مثال استفاده از Event Listener:
<button id="myBtn">Click me</button>
<script>
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
alert('Button clicked!');
});
</script>یادگیری بیشتر
می‌توانید اطلاعات بیشتری درباره رویدادها و مدیریت آن‌ها را در فصل‌های مربوط به HTML DOM بیابید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام