آموزش جاوا اسکریپت مبتدی : مقدمهای بر رویدادها
رویدادها اتفاقاتی هستند که در سیستمی که شما در حال برنامهنویسی آن هستید، رخ میدهند و سیستم در مورد آنها به شما اطلاع میدهد تا کد شما بتواند به آنها واکنش نشان دهد. به عنوان مثال، اگر کاربر روی دکمهای در یک صفحه وب کلیک کند، ممکن است بخواهید با نمایش یک کادر اطلاعات به آن عمل واکنش نشان دهید. در این مقاله، ما در مورد برخی از مفاهیم مهم پیرامون رویدادها بحث میکنیم و به اصول اولیه نحوه عملکرد آنها در مرورگرها نگاهی میاندازیم.
رویدادها اتفاقاتی هستند که در سیستمی که شما در حال برنامهنویسی آن هستید، رخ میدهند - سیستم هنگام وقوع یک رویداد، نوعی سیگنال تولید (یا "اجرا") میکند و مکانیزمی را فراهم میکند که به وسیله آن میتوان هنگام وقوع رویداد، به طور خودکار اقدامی انجام داد (یعنی اجرای کد). رویدادها در داخل پنجره مرورگر اجرا میشوند و معمولاً به یک مورد خاص که در آن قرار دارد، متصل میشوند. این مورد ممکن است یک عنصر واحد، مجموعهای از عناصر، سند HTML بارگذاری شده در برگه فعلی یا کل پنجره مرورگر باشد. انواع مختلفی از رویدادها وجود دارد که میتوانند رخ دهند.
به عنوان مثال:
- کاربر یک عنصر خاص را انتخاب، کلیک یا موس را روی آن نگه میدارد.
- کاربر کلیدی را روی صفحه کلید فشار میدهد.
- کاربر اندازه پنجره مرورگر را تغییر میدهد یا میبندد.
- بارگیری یک صفحه وب به پایان میرسد.
- یک فرم ارسال میشود.
- یک ویدیو پخش، متوقف یا پایان مییابد.
- خطایی رخ میدهد.
شما میتوانید از این (و با نگاهی به فهرست رویدادها) نتیجه بگیرید که رویدادهای زیادی وجود دارند که میتوانند اجرا شوند.
برای واکنش به یک رویداد، یک شنونده رویداد () به آن متصل میکنید. این یک ویژگی کد است که منتظر شروع رویداد میماند. وقتی رویداد شروع میشود، یک تابع مدیریت رویداد (که توسط شنونده رویداد ارجاع داده میشود یا درون آن قرار دارد) برای پاسخ به شروع رویداد فراخوانی میشود. وقتی چنین بلوکی از کد برای اجرا در پاسخ به یک رویداد تنظیم میشود، میگوییم که در حال ثبت یک مدیریت رویداد هستیم.
یک مثال: مدیریت یک رویداد کلیک
در مثال زیر، ما یک در صفحه داریم:
سپس مقداری جاوا اسکریپت داریم. در بخش بعدی با جزئیات بیشتری به این موضوع خواهیم پرداخت، اما فعلاً میتوانیم بگوییم: این یک شنونده رویداد به رویداد "کلیک" دکمه اضافه میکند و تابع کنترلکننده موجود با تنظیم پسزمینه صفحه به یک رنگ تصادفی به این رویداد واکنش نشان میدهد:
استفاده از addEventListener
همانطور که در مثال آخر دیدیم، اشیاء که میتوانند رویدادها را فعال کنند، یک متد دارند و این مکانیزم توصیه شده برای اضافه کردن شنوندههای رویداد است.
بیایید نگاهی دقیقتر به کد مثال آخر بیندازیم:
عنصر در HTML، وقتی کاربر روی آن کلیک میکند، یک رویداد کلیک را اجرا میکند. ما متد را روی آن فراخوانی میکنیم تا یک شنونده رویداد اضافه کنیم؛ این متد دو پارامتر میگیرد:
- رشته "click"، برای نشان دادن اینکه میخواهیم به رویداد کلیک گوش دهیم. دکمهها میتوانند رویدادهای دیگری مانند "mouseover" را وقتی کاربر ماوس خود را روی دکمه میبرد، یا "keydown" را وقتی کاربر کلیدی را فشار میدهد و دکمه در حالت فوکوس است، اجرا کنند.
- تابعی برای فراخوانی هنگام وقوع رویداد. در مورد ما، تابع ناشناس تعریف شده یک رنگ RGB تصادفی تولید میکند و رنگ پسزمینه صفحه را روی آن رنگ تنظیم میکند.
همچنین میتوانید یک تابع جداگانه با نام ایجاد کنید و آن را در پارامتر دوم به این صورت ارجاع دهید:
گوش دادن به رویدادهای دیگر
رویدادهای مختلف زیادی وجود دارند که میتوانند توسط یک عنصر دکمه اجرا شوند. بیایید آزمایش کنیم.
ابتدا، یک کپی محلی از ایجاد کنید و آن را در مرورگر خود باز کنید. این فقط یک کپی از مثال رنگ تصادفی سادهای است که قبلاً با آن بازی کردهایم. اکنون سعی کنید click را به ترتیب به مقادیر مختلف زیر تغییر دهید و نتایج را در مثال مشاهده کنید:
- focus و blur - رنگ زمانی که دکمه متمرکز و غیرمتمرکز است تغییر میکند؛ سعی کنید tab را فشار دهید تا روی دکمه متمرکز شود و دوباره tab را فشار دهید تا از دکمه دور شود. این رویدادها اغلب برای نمایش اطلاعات مربوط به پر کردن فیلدهای فرم هنگام متمرکز بودن یا نمایش پیام خطا در صورت پر شدن یک فیلد فرم با مقدار نادرست استفاده میشوند.
- dblclick - رنگ فقط زمانی تغییر میکند که روی دکمه دوبار کلیک شود.
- mouseover و mouseout - رنگ زمانی تغییر میکند که اشارهگر ماوس روی دکمه قرار میگیرد یا وقتی اشارهگر از روی دکمه خارج میشود.
برخی از رویدادها، مانند click، تقریباً در هر عنصری موجود هستند. برخی دیگر خاصتر هستند و فقط در موقعیتهای خاصی مفیدند: برای مثال، رویداد play فقط روی عناصری که قابلیت پخش دارند، مانند ، در دسترس است.
اگر با استفاده از یک شنونده رویداد اضافه کردهاید، میتوانید در صورت تمایل دوباره آن را حذف کنید. رایجترین روش برای انجام این کار استفاده از متد است. برای مثال، خط زیر، کنترلکننده رویداد کلیک را که قبلاً دیدیم، حذف میکند:
برای برنامههای ساده و کوچک، پاک کردن event handlerهای قدیمی و بلااستفاده ضروری نیست، اما برای برنامههای بزرگتر و پیچیدهتر، میتواند کارایی را بهبود بخشد. همچنین، قابلیت حذف event handlerها به شما این امکان را میدهد که در شرایط مختلف، دکمهی یکسانی داشته باشید که اقدامات مختلفی را انجام دهد: تنها کاری که باید انجام دهید اضافه کردن یا حذف event handlerها است.
اضافه کردن چندین شنونده برای یک رویداد واحد
با انجام بیش از یک فراخوانی تابع و ارائه هندلرهای مختلف، میتوانید چندین تابع هندلر را در پاسخ به یک رویداد واحد اجرا کنید:
حالا هر دو تابع با کلیک روی عنصر اجرا میشوند.
سایر مکانیزمهای شنونده رویداد
توصیه میکنیم از برای ثبت کنترلکنندههای رویداد استفاده کنید. این قدرتمندترین روش است و با برنامههای پیچیدهتر به بهترین شکل مقیاسپذیر است. با این حال، دو روش دیگر برای ثبت کنترلکنندههای رویداد وجود دارد که ممکن است ببینید: ویژگیهای کنترلکننده رویداد و کنترلکنندههای رویداد درونخطی.
ویژگیهای کنترلکننده رویداد
اشیاء (مانند دکمهها) که میتوانند رویدادها را فعال کنند، معمولاً دارای ویژگیهایی هستند که نام آنها on و به دنبال آن نام یک رویداد آمده است. برای مثال، عناصر دارای ویژگی onclick هستند. به این ویژگی، ویژگی کنترلکننده رویداد گفته میشود. برای گوش دادن به رویداد، میتوانید تابع کنترلکننده را به ویژگی اختصاص دهید.
برای مثال، میتوانیم مثال رنگ تصادفی را به این صورت بازنویسی کنیم:
همچنین میتوانید ویژگی handler را روی یک تابع نامگذاری شده تنظیم کنید:
ویژگیهای کنترلکننده رویداد در مقایسه با معایبی دارند. یکی از مهمترین آنها این است که نمیتوانید بیش از یک شنونده برای یک رویداد اضافه کنید. الگوی زیر کار نمیکند، زیرا هرگونه تلاش بعدی برای تنظیم مقدار ویژگی، تلاشهای قبلی را بازنویسی میکند:
کنترلکنندههای رویداد درونخطی - از اینها استفاده نکنید
همچنین ممکن است الگویی مانند این را در کد خود مشاهده کنید:
اولین روش ثبت کنترلکنندههای رویداد که در وب یافت شد، شامل ویژگیهای HTML کنترلکننده رویداد (یا کنترلکنندههای رویداد درونخطی) مانند روشی بود که در بالا نشان داده شده است - مقدار ویژگی شامل کد جاوا اسکریپتی است که میخواهید هنگام وقوع رویداد اجرا شود. مثال بالا تابعی را که درون یک عنصر در همان صفحه تعریف شده است، فراخوانی میکند، اما میتوانید جاوا اسکریپت را مستقیماً درون ویژگی نیز وارد کنید، برای مثال:
میتوانید معادلهای ویژگی HTML را برای بسیاری از ویژگیهای کنترلکننده رویداد پیدا کنید؛ با این حال، نباید از این موارد استفاده کنید - آنها یک عمل بد محسوب میشوند. اگر کاری خیلی سریع انجام میدهید، استفاده از یک ویژگی کنترلکننده رویداد ممکن است آسان به نظر برسد، اما آنها به سرعت غیرقابل مدیریت و ناکارآمد میشوند.
برای شروع، ایده خوبی نیست که HTML و جاوا اسکریپت خود را با هم قاطی کنید، زیرا خواندن آن سخت میشود. جدا نگه داشتن جاوا اسکریپت یک عمل خوب است و اگر در یک فایل جداگانه باشد، میتوانید آن را در چندین سند HTML اعمال کنید.
حتی در یک فایل واحد، کنترلکنندههای رویداد درون خطی ایده خوبی نیستند. یک دکمه اشکالی ندارد، اما اگر ۱۰۰ دکمه داشته باشید چه؟ باید ۱۰۰ ویژگی به فایل اضافه کنید. این به سرعت به یک کابوس تعمیر و نگهداری تبدیل میشود. با جاوا اسکریپت، میتوانید به راحتی یک تابع کنترلکننده رویداد را به تمام دکمههای صفحه، صرف نظر از تعداد آنها، با استفاده از چیزی شبیه به این اضافه کنید:
در نهایت، بسیاری از پیکربندیهای رایج سرور، به عنوان یک اقدام امنیتی، جاوا اسکریپت درونخطی را مجاز نمیدانند.
شما هرگز نباید از ویژگیهای کنترلکننده رویداد HTML استفاده کنید - این ویژگیها قدیمی هستند و استفاده از آنها یک روش نادرست است.
گاهی اوقات، درون یک تابع مدیریت رویداد، پارامتری را مشاهده خواهید کرد که با نامی مانند event، evt یا e مشخص شده است. این پارامتر، شیء رویداد نامیده میشود و به طور خودکار به مدیریتکنندههای رویداد منتقل میشود تا ویژگیها و اطلاعات اضافی را ارائه دهد. برای مثال، بیایید مثال رنگ تصادفی خود را طوری بازنویسی کنیم که شامل یک شیء رویداد باشد:
در اینجا میتوانید ببینید که ما یک شیء رویداد، e، را در تابع قرار میدهیم و در تابع، یک سبک رنگ پسزمینه را روی - که خود دکمه است - تنظیم میکنیم. ویژگی target شیء رویداد همیشه ارجاعی به عنصری است که رویداد روی آن رخ داده است. بنابراین، در این مثال، ما یک رنگ پسزمینه تصادفی روی دکمه تنظیم میکنیم، نه روی صفحه.
میتوانید از هر نامی که دوست دارید برای شیء رویداد استفاده کنید - فقط باید نامی را انتخاب کنید که بتوانید در داخل تابع کنترلکننده رویداد به آن ارجاع دهید. e، evt و event معمولاً توسط توسعهدهندگان استفاده میشوند زیرا کوتاه و به راحتی قابل یادآوری هستند. همیشه خوب است که - با خودتان و در صورت امکان با دیگران - سازگار باشید.
ویژگیهای اضافی اشیاء رویداد
بیشتر اشیاء رویداد، مجموعهای استاندارد از ویژگیها و متدهای موجود در شیء رویداد را دارند؛ برای مشاهده لیست کامل به مرجع شیء رویداد مراجعه کنید.
برخی از اشیاء رویداد، ویژگیهای اضافی مرتبط با آن نوع رویداد خاص را اضافه میکنند. به عنوان مثال، رویداد keydown زمانی فعال میشود که کاربر یک کلید را فشار دهد. شیء رویداد آن یک KeyboardEvent است که یک شیء رویداد تخصصی با یک ویژگی کلید است که به شما میگوید کدام کلید فشرده شده است:
گاهی اوقات، با موقعیتی مواجه میشوید که میخواهید از انجام کاری که یک رویداد به طور پیشفرض انجام میدهد، جلوگیری کنید. رایجترین مثال، فرم وب است، مثلاً یک فرم ثبت نام سفارشی. وقتی جزئیات را پر میکنید و روی دکمه ارسال کلیک میکنید، رفتار طبیعی این است که دادهها برای پردازش به صفحه مشخصی در سرور ارسال شوند و مرورگر به نوعی صفحه "پیام موفقیت" (یا همان صفحه، اگر صفحه دیگری مشخص نشده باشد) هدایت شود.
مشکل زمانی پیش میآید که کاربر دادهها را به درستی ارسال نکرده باشد - به عنوان یک توسعهدهنده، میخواهید از ارسال دادهها به سرور جلوگیری کنید و یک پیام خطا بدهید که میگوید چه چیزی اشتباه است و برای اصلاح امور چه کاری باید انجام شود. برخی از مرورگرها از ویژگیهای اعتبارسنجی خودکار دادههای فرم پشتیبانی میکنند، اما از آنجایی که بسیاری از آنها پشتیبانی نمیکنند، به شما توصیه میشود که به آنها اعتماد نکنید و بررسیهای اعتبارسنجی خود را پیادهسازی کنید. بیایید به یک مثال نگاه کنیم.
ابتدا، یک فرم HTML ساده که از شما میخواهد نام و نام خانوادگی خود را وارد کنید:
حالا کمی جاوا اسکریپت - در اینجا ما یک بررسی اولیه را درون یک هندلر برای رویداد ارسال (رویداد ارسال هنگام ارسال فرم اجرا میشود) پیادهسازی میکنیم که بررسی میکند آیا فیلدهای متنی خالی هستند یا خیر. اگر خالی باشند، تابع را روی شیء رویداد فراخوانی میکنیم - که ارسال فرم را متوقف میکند - و سپس یک پیام خطا در پاراگراف زیر فرم خود نمایش میدهیم تا به کاربر بگوییم چه مشکلی وجود دارد:
بدیهی است که این یک اعتبارسنجی فرم نسبتاً ضعیف است - برای مثال، مانع از اعتبارسنجی فرم توسط کاربر با فاصله یا اعداد وارد شده در فیلدها نمیشود - اما برای اهداف مثالی اشکالی ندارد.
رویداد ها فقط مختص صفحات وب نیستند
رویدادها مختص جاوا اسکریپت نیستند - اکثر زبانهای برنامهنویسی نوعی مدل رویداد دارند و نحوه عملکرد این مدل اغلب با روش جاوا اسکریپت متفاوت است. در واقع، مدل رویداد در جاوا اسکریپت برای صفحات وب با مدل رویداد برای جاوا اسکریپت متفاوت است، زیرا در محیطهای دیگر استفاده میشود.
به عنوان مثال، یک محیط اجرای جاوا اسکریپت بسیار محبوب است که به توسعهدهندگان امکان میدهد از جاوا اسکریپت برای ساخت برنامههای شبکه و سمت سرور استفاده کنند. مدل رویداد به شنوندهها برای گوش دادن به رویدادها و ساطعکنندهها برای انتشار دورهای رویدادها متکی است - به نظر نمیرسد که خیلی متفاوت باشد، اما کد کاملاً متفاوت است و از توابعی مانند برای ثبت یک شنونده رویداد و برای ثبت یک شنونده رویداد که پس از یک بار اجرا، ثبت را لغو میکند، استفاده میکند. اسناد رویداد HTTP connect در مثال خوبی ارائه میدهند.
همچنین میتوانید از جاوا اسکریپت برای ساخت افزونههای چند مرورگری - بهبود عملکرد مرورگر - با استفاده از فناوری به نام
در این مرحله از یادگیری، نیازی به درک چیزی در مورد سایر محیطهای مشابه ندارید؛ ما فقط میخواستیم روشن کنیم که رویدادها میتوانند در محیطهای برنامهنویسی مختلف متفاوت باشند. استفاده کنید. مدل رویداد مشابه مدل رویدادهای وب است، اما کمی متفاوت است - ویژگیهای شنونده رویداد به صورت camel case نوشته میشوند (مانند onMessage به جای onmessage) و باید با تابع addListener ترکیب شوند.
