در دنیای وب امروزی، صفحات اینترنتی دیگر محتوایی ثابت نیستند، بلکه به رفتار کاربران واکنش نشان می‌دهند. این تعاملات (مانند کلیک روی دکمه‌ها، تایپ در فرم‌ها یا حرکت ماوس) به کمک مفهومی اساسی در جاوا اسکریپت به نام مدیریت رویدادها (Event Handling) امکان‌پذیر می‌شوند.

برای افرادی که تازه یادگیری برنامه‌نویسی را آغاز کرده‌اند، شناخت این مفهوم یکی از گام‌های مهم برای ورود به دنیای واقعی توسعه وب است. در این مقاله، Event Handling را به‌صورت ساده، کاربردی و از پایه بررسی می‌کنیم تا بتوانید نحوه واکنش صفحات وب به اعمال کاربران را به‌خوبی درک کنید.

 

 

javaScrpit_Event_Handling
Event Handling در جاوا اسکریپت

 

Event Handling چیست؟

رویدادها (Events) اتفاقاتی هستند که در سیستمی که شما در حال برنامه‌نویسی آن هستید رخ می‌دهند و کمک میکنند تا سیستم بتواند آن‌ها را به شما اطلاع رسانی کند و کدتان بتواند به آن‌ها واکنش نشان دهد.

برای مثال، اگر کاربری روی یک دکمه در یک صفحه وب کلیک کند، ممکن است بخواهید در پاسخ به این عمل، یک جعبه اطلاعات (پیام یا اعلان) نمایش داده شود.

در این مقاله، برخی از مفاهیم مهم که مرتبط با رویدادها هستند را بررسی می‌کنیم و با اصول پایه‌ای و نحوه کار آن‌ها در مرورگرها آشنا می‌شویم.

برای مثال:

  • کاربر یک عنصر را انتخاب می‌کند، روی آن کلیک می‌کند یا موس را روی آن نگه می‌دارد.
  • کاربر یک کلید روی کیبورد را فشار می‌دهد.
  • کاربر اندازه پنجره مرورگر را تغییر می‌دهد یا آن را می‌بندد.
  • یک صفحه وب به‌طور کامل بارگذاری می‌شود.
  • یک فرم ارسال می‌شود.
  • ویدئو پخش می‌شود، متوقف می‌شود یا به پایان می‌رسد.
  • خطایی رخ می‌دهد.

با این مثال‌ها (و با نگاهی به فهرست رویدادها) مشخص است که تعداد زیادی رویدادها وجود دارند که می‌توانند اتفاق بیفتند.

برای واکنش به یک رویداد، یک شنونده رویداد (Event Listener) به آن متصل می‌کنیم. این یک قابلیت کدنویسی است که «گوش به زنگ» وقوع رویداد می‌ماند. وقتی رویداد رخ دهد، تابع مدیریت رویداد (Event Handler) که داخل یا ارجاع داده شده به شنونده است، فراخوانی می‌شود تا به رویداد واکنش نشان دهد.

وقتی چنین بلوک کدی برای اجرا در پاسخ به یک رویداد تنظیم می‌شود، می‌گوییم که یک Event Handler ثبت کرده‌ایم.

مثال: مدیریت رویداد کلیک

در مثال زیر، یک دکمه <button> در صفحه داریم:

<button>Change color</button>

سپس کمی جاوا اسکریپت داریم. در بخش بعدی به جزئیات آن می‌پردازیم، اما فعلاً می‌توانیم بگوییم:

این کد یک Event Listener به رویداد "click" دکمه اضافه می‌کند، و تابع مدیریت رویداد (handler) داخل آن به این رویداد واکنش نشان می‌دهد، به طوری که پس‌زمینه صفحه به یک رنگ تصادفی تغییر پیدا می‌کند:

const btn = document.querySelector(“button”);

function random(number) {
return Math.floor(Math.random() * (number + 1));
}

btn.addEventListener(“click”, () => {
const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
document.body.style.backgroundColor = rndCol;
});

 

استفاده از addEventListener () : 

همان‌طور که در مثال قبلی دیدیم، اشیایی که می‌توانند رویداد تولید کنند، دارای متد addEventListener() هستند و این روش توصیه‌شده برای اضافه کردن شنونده‌های رویداد محسوب می‌شود.

بیایید کمی دقیق‌تر به کد مثال قبل نگاه کنیم:

const btn = document.querySelector(“button”);

function random(number) {
return Math.floor(Math.random() * (number + 1));
}

btn.addEventListener(“click”, () => {
const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
document.body.style.backgroundColor = rndCol;
});

 

عنصر <button> وقتی کاربر روی آن کلیک می‌کند، یک رویداد click تولید می‌کند. ما با استفاده از متد addEventListener() یک شنونده رویداد به آن اضافه می‌کنیم. این متد دو پارامتر می‌گیرد:

  1. نوع رویداد:
    رشته "click" که نشان می‌دهد می‌خواهیم به رویداد کلیک گوش دهیم.
    دکمه‌ها می‌توانند رویدادهای دیگری هم تولید کنند، مثل:

    • "mouseover" وقتی موس روی دکمه حرکت می‌کند
    • "keydown" وقتی یک کلید فشار داده می‌شود و دکمه فوکوس دارد
  2. تابع مدیریت رویداد:
    تابعی که هنگام وقوع رویداد اجرا می‌شود. در مثال ما، تابع ناشناس (anonymous function) یک رنگ RGB تصادفی تولید می‌کند و رنگ پس‌زمینه <body> صفحه را به آن رنگ تغییر می‌دهد.

همچنین می‌توانید یک تابع جداگانه با نام مشخص ایجاد کنید و آن را به‌عنوان پارامتر دوم addEventListener() ارجاع دهید، به‌صورت زیر:

const btn = document.querySelector(“button”);

function random(number) {
return Math.floor(Math.random() * (number + 1));
}

function changeBackground() {
const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
document.body.style.backgroundColor = rndCol;
}

btn.addEventListener(“click”, changeBackground);

 

event_handler چیست؟
event handler چیست؟

 

 

عنصر <button> در HTML زمانی که کاربر روی آن کلیک کند، یک رویداد click ایجاد می‌کند. ما متد addEventListener() را روی آن فراخوانی می‌کنیم تا یک شنونده رویداد اضافه کنیم. این متد دو پارامتر دریافت می‌کند:

  • رشته “click” که مشخص می‌کند می‌خواهیم به رویداد کلیک گوش دهیم. دکمه‌ها می‌توانند رویدادهای دیگری هم ایجاد کنند؛ برای مثال “mouseover” زمانی که کاربر ماوس را روی دکمه می‌برد، یا “keydown” وقتی که دکمه در حالت فوکوس است و کاربر یک کلید را فشار می‌دهد.

  • یک تابع که هنگام وقوع رویداد فراخوانی می‌شود. در مثال ما، این تابع ناشناس یک رنگ تصادفی RGB تولید می‌کند و رنگ پس‌زمینه عنصر <body> صفحه را به همان رنگ تغییر می‌دهد.

همچنین می‌توانید یک تابع جداگانه با نام مشخص تعریف کنید و در پارامتر دوم addEventListener() به آن ارجاع دهید، مانند این:

const btn = document.querySelector(“button”);

function random(number) {
return Math.floor(Math.random() * (number + 1));
}

function changeBackground() {
const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
document.body.style.backgroundColor = rndCol;
}

btn.addEventListener(“click”, changeBackground);

 

 

JavaScript_language
زبان برنامه نویسی جاوا اسکریپت

 

یک عنصر دکمه می‌تواند انواع مختلفی از رویدادها را ایجاد کند. بیایید آن‌ها را به‌صورت عملی بررسی کنیم.

ابتدا یک نسخه محلی از فایل random-color-addeventlistener.html تهیه کرده و آن را در مرورگر خود باز کنید. این فایل در واقع همان مثال ساده تغییر رنگ تصادفی است که قبلاً با آن کار کرده‌ایم.

حالا مقدار click را به‌صورت آزمایشی با گزینه‌های زیر جایگزین کنید و نتیجه را مشاهده کنید:

  • focus و blur — رنگ زمانی تغییر می‌کند که دکمه فوکوس بگیرد یا فوکوس از آن برداشته شود. می‌توانید با فشردن کلید Tab روی دکمه فوکوس کنید و با فشردن دوباره Tab فوکوس را از آن خارج کنید. این رویدادها معمولاً برای نمایش راهنما هنگام پر کردن فرم‌ها یا نشان دادن پیام خطا در صورت وارد کردن مقدار نادرست استفاده می‌شوند.

  • dblclick — رنگ فقط زمانی تغییر می‌کند که دکمه دوبار کلیک شود.

  • mouseover و mouseout — رنگ به‌ترتیب زمانی تغییر می‌کند که نشانگر ماوس روی دکمه قرار بگیرد یا از روی آن خارج شود.

برخی رویدادها مانند click تقریباً روی همه عناصر در دسترس هستند، اما بعضی دیگر اختصاصی‌ترند و فقط در شرایط خاص کاربرد دارند؛ برای مثال رویداد play فقط روی عناصری که قابلیت پخش دارند (مانند عنصر <video>) در دسترس است.

حذف شنونده‌ها (Removing listeners)

اگر با استفاده از متد addEventListener() یک شنونده رویداد اضافه کرده باشید، در صورت نیاز می‌توانید آن را حذف کنید. رایج‌ترین روش برای انجام این کار، استفاده از متد removeEventListener() است.

برای مثال، خط کد زیر می‌تواند همان Event Handler مربوط به رویداد click که قبلاً دیدیم را حذف کند:

btn.removeEventListener(“click”, changeBackground);

جلوگیری از رفتار پیش‌فرض (Preventing default behavior)

گاهی با موقعیتی روبه‌رو می‌شوید که می‌خواهید از انجام رفتار پیش‌فرض یک رویداد جلوگیری کنید. رایج‌ترین مثال در این زمینه، فرم‌های وب هستند؛ مثلاً یک فرم ثبت‌نام سفارشی. زمانی که کاربر اطلاعات را وارد کرده و روی دکمه ارسال (Submit) کلیک می‌کند، رفتار طبیعی این است که داده‌ها برای پردازش به یک صفحه مشخص در سرور ارسال شوند و مرورگر به یک صفحه «پیام موفقیت» (یا همان صفحه فعلی، اگر صفحه دیگری تعیین نشده باشد) هدایت شود.

مشکل زمانی ایجاد می‌شود که کاربر اطلاعات را به‌درستی وارد نکرده باشد. در این حالت، شما به‌عنوان توسعه‌دهنده می‌خواهید از ارسال داده به سرور جلوگیری کنید و یک پیام خطا نمایش دهید که توضیح دهد مشکل چیست و کاربر باید چه کاری انجام دهد تا آن را اصلاح کند.

برخی مرورگرها قابلیت‌های اعتبارسنجی خودکار فرم را پشتیبانی می‌کنند، اما از آنجا که بسیاری از آن‌ها چنین قابلیتی ندارند، توصیه می‌شود به این ویژگی‌ها تکیه نکنید و اعتبارسنجی‌های موردنیاز را خودتان پیاده‌سازی کنید.

بیایید یک مثال را بررسی کنیم.

ابتدا یک فرم ساده HTML که از شما می‌خواهد نام و نام خانوادگی خود را وارد کنید:

<form action=”#”>
<div>
<label for=”fname”>First name: </label>
<input id=”fname” type=”text” />
</div>
<div>
<label for=”lname”>Last name: </label>
<input id=”lname” type=”text” />
</div>
<div>
<input id=”submit” type=”submit” />
</div>
</form>
<p></p>

حالا نوبت جاوا اسکریپت است. در اینجا ما یک بررسی ساده داخل یک Event Handler برای رویداد submit پیاده‌سازی می‌کنیم (رویداد submit زمانی روی فرم اجرا می‌شود که فرم ارسال گردد). این بررسی چک می‌کند که آیا فیلدهای متنی خالی هستند یا نه.

اگر خالی باشند، تابع preventDefault() را روی شیء رویداد فراخوانی می‌کنیم. این کار باعث می‌شود ارسال فرم متوقف شود، سپس یک پیام خطا در پاراگراف زیر فرم نمایش می‌دهیم تا به کاربر اطلاع دهیم مشکل چیست.

const form = document.querySelector(“form”);
const fname = document.getElementById(“fname”);
const lname = document.getElementById(“lname”);
const para = document.querySelector(“p”);

form.addEventListener(“submit”, (e) => {
if (fname.value === “” || lname.value === “”) {
e.preventDefault();
para.textContent = “You need to fill in both names!”;
}
});

 

نکته:

رویدادها فقط مخصوص جاوا اسکریپت نیستند، بیشتر زبان‌های برنامه‌نویسی نوعی «مدل رویداد» دارند و نحوه کار این مدل‌ها معمولاً با روش جاوا اسکریپت متفاوت است. حتی در خود جاوا اسکریپت نیز، مدل رویداد در صفحات وب با مدل رویداد در محیط‌های دیگر متفاوت است.

برای مثال، Node.js یک محیط اجرایی بسیار محبوب برای جاوا اسکریپت است که به توسعه‌دهندگان اجازه می‌دهد با جاوا اسکریپت برنامه‌های شبکه‌ای و سمت سرور بسازند. مدل رویداد در Node.js بر پایه listener‌ها برای گوش دادن به رویدادها و emitter‌ها برای ایجاد (emit) رویدادها به‌صورت دوره‌ای کار می‌کند. از نظر مفهومی خیلی متفاوت به نظر نمی‌رسد، اما در عمل کدها تفاوت دارند و از توابعی مثل on() برای ثبت یک شنونده رویداد و once() برای ثبت شنونده‌ای که فقط یک‌بار اجرا می‌شود استفاده می‌شود.

همچنین می‌توانید با جاوا اسکریپت افزونه‌های مرورگر (Browser Add-ons) یا همان ابزارهای افزایش قابلیت مرورگر را با فناوری‌ای به نام WebExtensions بسازید. مدل رویداد در اینجا شبیه مدل رویدادهای وب است، اما کمی تفاوت دارد. برای مثال، ویژگی‌های شنونده رویداد با camelCase نوشته می‌شوند (مثل onMessage به‌جای onmessage) و باید همراه با تابع addListener استفاده شوند.

در این مرحله از یادگیری لازم نیست جزئیات این محیط‌ها را بدانید؛ هدف فقط این است که بدانید مفهوم رویداد در محیط‌های مختلف برنامه‌نویسی می‌تواند شکل‌های متفاوتی داشته باشد.

منبع ;

   جمع بندی

رویدادها بخش مهمی از برنامه‌نویسی در جاوا اسکریپت هستند و باعث می‌شوند صفحات وب بتوانند به اعمال کاربران مانند کلیک، تایپ یا ارسال فرم واکنش نشان دهند. برای مدیریت این رویدادها از Event Listener‌ها و توابع Event Handler استفاده می‌شود که امکان اجرای خودکار کد هنگام وقوع یک رویداد را فراهم می‌کنند. همچنین می‌توان در صورت نیاز، شنونده‌ها را حذف کرد یا رفتار پیش‌فرض برخی رویدادها را کنترل نمود.

در مجموع، آشنایی با Event Handling یکی از پایه‌ای‌ترین و ضروری‌ترین مهارت‌ها برای شروع توسعه وب تعاملی با جاوا اسکریپت به شمار می‌رود.

 

برای مشاهده آموزش‌های تخصصی‌، همین حالا به وبلاگ کداستورپرو سری بزنید!