فرادرسEvent در جاوا اسکریپت چیست؟ – توضیح مفهوم رویداد + مثال
Event در جاوا اسکریپت (رویداد در جاوا اسکریپت) به اقداماتی گفته میشود که در مرورگر انجام خواهند شد و می‌توانند توسط کاربر یا خودِ مرورگر فعال شوند. با استفاده از اجرای رویدادها در جاوا اسکریپت، برنامه نویسان می‌توانند برنامه‌ها و وبسایتهای خود را تعاملی‌تر کرده و به کاربران تجربه بهتری را از سایت یا برنامه خود ارئه دهند. در این مطلب از مجله آموزشی فرادرس می‌خواهیم در رابطه با Event در جاوا اسکریپت و ابعاد مختلف آن توضیحاتی را ارائه کنیم.
Event در جاوا اسکریپت چیست ؟
رویداد یا همان Ecent در زبان برنامه نویسی جاوا اسکریپت عملی است که می‌تواند تابعی را برای اجرا در هنگام وقوع آن رویداد فرواخوانی کرده و آن تابع عملی در ازای این فراخوانی انجام دهد. از جمله نمونه‌هایی از وقوع رویدادها در جاوا اسکریپت می‌توان به کلیک کردن کاربر روی دکمه‌ها، نگهداشتن ماوس روی عناصر، تغییر اندازه پنجره، ارسال فُرم و بسیاری از عمل‌های دیگر اشاره کرد.
«کنترل کننده رویداد» (Event Handler)، «شنونده رویداد» (Event Listeners) و «اشیای رویداد» (Event Objects)، همه اجزای مهم مدیریت رویدادها در جاوا اسکریپت هستند که در ادامه با هر کدام از آن‌ها آشنا خواهیم شد.
انواع Event در جاوا اسکریپت
رویدادهای متداولی که می‌توانند در وبسایتهای مختلف رخ دهند زیاد هستند و از این میان می‌توان فهرست رویدادهای زیر را نام برد.
- زمانی که صفحه بارگیری میشود.
- وقتی کاربر روی دکمه‌ای کلیک می‌کند.
- زمانی که کاربر ماوس را روی یک عنصر نگه می‌دارد.
- هنگامی که کاربر فرمی را ارسال می‌کند.
- وقتی که کاربر کلیدی را روی صفحه‌کلید خود فشار می‌دهد.
- و بسیاری از موارد دیگر از این دست
با استفاده از «پاسخ‌های جاوا اسکریپت» (JavaScript Responses) برای اجرای این رویدادها، توسعه‌دهندگان می‌توانند وبسایتهای خود را به گونه‌ای توسعه دهند که در ازای اقدام کاربران، پیام‌هایی را برای آن‌ها نمایش دهند، داده‌ها را اعتبارسنجی کنند و به کلیک کاربران روی دکمه‌ها واکنش نشان دهند.
کنترل کننده رویداد و شنونده رویداد در جاوا اسکریپت
هنگامی که کاربر روی دکمه یا عنصری در صفحه کلیک می‌کند (رویداد کلیک) یا کلیدی را فشار می‌دهد (رویداد فشار کلید)، رویداد در جاوا اسکریپت فعال میشود. در اصل کنترل کننده رویداد نوعی تابع جاوا اسکریپت است که هنگام فعال شدن یک رویداد اجرا میشود.
«شنونده رویداد» (Event Listeners) در جاوا اسکریپت نوعی رابط پاسخگو را به عناصری خاص متصل می‌کند. این رابط به آن عناصر خاص اجازه می‌دهد تا منتظر رویداد بمانند و هنگام وقوع رویدادها، اعمال متناسب خود را انجام دهند. سه راه برای تخصیص رویدادها به عناصر در جاوا اسکریپت وجود دارد که به صورت فهرست موارد زیر هستند:
- «کنترل کننده رویداد درون‌خطی» (Inline Event Handlers)
- «ویژگی‌های یا پراپرتی کنترل کننده رویداد» (Event Handler Properties)
- «شنونده رویداد» (Event Listeners)
در ادامه برای آشنایی هر چه بهتر کاربران با موضوع Event در جاوا اسکریپت هر سه مورد اشاره شده پوشش داده می‌شوند.
کنترل کننده رویداد درون خطی
برای درک بهتر کنترل کننده رویداد درون‌خطی (رویداد داخلی) از مثالی شروع خواهیم کرد. می‌توان از کنترل کننده رویداد درون‌خطی برای عملگرا کردن دکمههای داخل صفحات وب استفاده کرد تا وقتی کاربر روی آن‌ها کلیک می‌کند، تغییری انجام شود.
برای نمونه در مثال پیش رو، محتوای متن تگ p تغییر خواهد کرد. برای انجام این کار، ابتدا به یک صفحه HTML نیاز خواهد بود که این صفحه دارای عنصر دکمه و تگ pدر بدنه خود است. سپس یک کنترل کننده رویداد به عنصر دکمه اضافه میشود که این کنترل کننده نوعی تابع جاوا اسکریپت را فراخوانی می‌کند.
تابع جاوا اسکریپت محتوای متن عنصر pرا به‌روز خواهد کرد. برای پیاده‌سازی هدف بالا باید فایل جاوا اسکریپت را در صفحه HTML قرار داد که قطعه کد آن به صورت زیر است:
1<!DOCTYPE html>
2<html lang="en-US">
3
4<head>
5 <title>آموزش رویداد در جاوا اسکریپت- مجله فرادرس</title>
6</head>
7
8<body>
9
10 <!-- Add button -->
11 <button>اینجا کلیک کنید</button>
12
13 <p>اعمال تغییر</p>
14
15</body>
16
17<!-- Reference JavaScript file -->
18<script src="js/events.js"></script>
19
20</html>در این مثال به صورت مستقیم روی دکمه، نوعی ویژگی به نام onclick اضافه خواهد شد. «مقدار ویژگی» (AttributeValue) تابعی به نام changeText() خواهد بود.
1<!DOCTYPE html>
2<html lang="en-US">
3
4<head>
5 <title>آموزش رویداد در جاوا اسکریپت- مجله فرادرس</title>
6</head>
7
8<body>
9 <button onclick="changeText()">اینجا کلیک کنید</button>
10
11 <p>اعمال تغییر</p>
12
13</body>
14
15<script src="js/events.js"></script>
16
17</html>حال نوبت به ساخت فایلی به نام Events.js می‌رسد که در داخل آن تابعی به نام changeText()وجود دارد و این تابع محتوای تگ pرا تغییر می‌دهد و قطعه کد آن هم به صورت زیر است:
1// Function to modify the text content of the paragraph
2const changeText = () => {
3 const p = document.querySelector('p');
4
5 p.textContent = "این متن به وسیله کنترل کننده رویداد داخلی تغییر یافته است";
6}حال اگر فایل «Events.html» اجرا شود، خروجی مانند تصویر زیر خواهد بود:
حال اگر کاربر روی دکمه اینجا کلیک کنید ، کلیک کند، متن از عبارت اعمال تغییر به عبارت زیر تغییر خواهد کرد.
کنترل کننده رویدادهای درون‌خطی راهی آسان برای فهم و درک Event در جاوا اسکریپت محسوب می‌شوند ولی با این حال بهتر است از آن‌ها فقط در اهداف آموزشی و آزمایشی استفاده کرد. کنترل‌کننده‌های رویداد داخلی جاوا اسکریپت با استایلهای داخلی CSS در داخل عناصر HTML قابل مقایسه هستند.
نگهداری و به‌روزرسانی یک «استایل شیت» (Stylesheet) مجزا از کلاس‌ها بسیار بهتر از ایجاد چندین استایل‌شیت درون‌خطی برای هر عنصر یا کلاس است. همچنین این کار برای کنترل‌کننده‌های رویداد جاوا اسکریپت نیز صدق می‌کند و مدیریت رویدادها در جاوا اسکریپت از یک فایل خاص بهتر از زمانی است که برای هر رویداد فایلی جداگانه وجود داشته باشد.
ویژگی کنترل کننده رویداد در جاوا اسکریپپت
در این بخش، ویژگی کنترل کننده رویداد مورد بررسی قرار خواهد گرفت. ویژگی کنترل کننده رویداد شبیه به کنترل کننده رویداد درون‌خطی است ولی در اینجا به جای اینکه ویژگی‌ها در فایل HTML تنظیم شوند، در فایل جاوا اسکریپت تنظیم خواهند شد.
تنظیمات این بخش با بخش بالا یا همان کنترل کننده رویداد درون‌خطی کاملاً یکسان است ولی با این تفاوت که در ویژگی کنترل کننده رویداد دیگر onclick="changeText()" در فایل HTML وجود نخواهد داشت. قطعه کد زیر این مفهوم را بیان می‌کند.
1<!DOCTYPE html>
2<html lang="en-US">
3
4<head>
5 <title>Events</title>
6</head>
7
8<body>
9
10 <button>اینجا کلیک کنید</button>
11
12 <p>این متن تغییر خواهد کرد</p>
13
14</body>
15
16<!-- Reference JavaScript file -->
17<script src="js/events.js"></script>
18
19</html>تابع یا عملکرد تعریف شده مانند خودش باقی خواهد ماند، با این تفاوت که اکنون در فایل جاوا اسکریپت به عنصر دکمه دسترسی ایجاد شده است. قطعه کد زیر این موضوع را نشان می‌دهد.
1// Function to modify the text content of the paragraph
2const changeText = () => {
3 const p = document.querySelector('p');
4
5 p.textContent = "این متن به وسیله ویژگی کنتترل کننده رویداد تغییر یافته است";
6}
7
8// Add event handler as a property of the button element
9const button = document.querySelector('button');
10button.onclick = changeText;نکته: کنترل‌کننده‌های رویداد از قرارداد «CamelCase» که اکثر کدهای جاوا اسکریپت به آن پایبند هستند، پیروی نمی‌کنند. در این مثال باید توجه داشت که کد onclick است نه onClick و در نهایت با اجرای فایل HTML خروجی به صورت تصویر زیر خواهد بود.
حال اگر کاربر روی دکمه کلیک کند خروجی به صورت تصویر زیر خواهد شد:
