فصل ۱۳: کار با رویدادها (Events) در جاوااسکریپت

محمد
اموزش جاوا اسکریپت

اموزش رایگان جاوا اسکریپت از مقدماتی تا متوسط

مقدمه

فرض کن کاربر دکمه‌ای را فشار می‌دهد، mous را روی تصویر می‌برد یا در یک فیلد چیزی می‌نویسد. چطور این فعل و انفعالات را با جاوااسکریپت کنترل کنیم؟ همه این‌ها یک “رویداد” هستند! در این فصل یاد می‌گیری رویداد چیست، چطور event listener اضافه کنی، چه‌طور رفتار پیش‌فرض مثلا ارسال فرم را بگیری، و ابزارهای پرکاربرد این بخش را مرحله‌به‌مرحله بشناسی.

رویداد (Event) چیست؟

هر اتفاقی که داخل صفحه وب بیوفتد (مثل کلیک، حرکت ماوس، فشردن یک کلید، تغییر درون یک input، ارسال فرم و …) یک رویداد است. با جاوااسکریپت می‌توانی به این رویدادها «گوش» بدهی و واکنش نشان بدهی.

نحوه اضافه‌کردن Event Listener

ساده‌ترین راه استفاده از متد addEventListener است.

var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
  alert("دکمه کلیک شد!");
});

"click" نوع رویداد است.
تابع دوم، کاری است که باید پس از رویداد انجام شود.

رویدادهای پرکاربرد

click: وقتی روی چیزی کلیک می‌شود
input: وقتی ورودی کاربر در یک input تغییر کند
submit: وقتی یک فرم ارسال شود
change: وقتی مقدار بعضی المان‌ها مانند select تغییر کند
mouseover/mouseout: حرکت موس روی یک المان یا خارج شدن از آن

مثال: تغییر رنگ پس‌زمینه با کلیک

btn.addEventListener("click", function() {
  document.body.style.backgroundColor = "lightgreen";
});

حذف Event Listener

اگر خواستی یک رویداد را غیرفعال کنی:

function showAlert() { alert("کلیک!"); }
btn.addEventListener("click", showAlert);
// برای حذف:
btn.removeEventListener("click", showAlert);

تفاوت کد HTML و addEventListener

غلط و قدیمی‌تر:

<button onclick="myFunction()">کلیک کن</button>

درست و مدرن‌تر (داخل js):

btn.addEventListener("click", myFunction);

قلب یادگیری سایت داینامیک addEventListener است!
بهتر است همیشه Event Listener را جدا از HTML و در فایل JS اضافه کنی تا ساختار کد خواناتر، بهینه‌تر و حرفه‌ای‌تر باشد.

رویداد submit فرم و جلوگیری از رفتار پیش‌فرض

مثال: فرم را بگیری ولی بدون اینکه واقعا صفحه Refresh شود:

var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();     // جلوی ارسال واقعی را می‌گیرد
  alert("فرم شما با موفقیت بررسی شد!");
});

حتماً! این بخش را با توضیح ساده‌تر، دلیل استفاده و یک مثال گام‌به‌گام همراه با نکات کاربردی برایت آماده می‌کنم تا به فصل رویدادها اضافه کنی:

مثال عملی‌تر: جلوگیری از رفتار پیش‌فرض فرم (فرم بدون رفرش)

وقتی کاربر فرم را پر می‌کند و روی دکمه ارسال (submit) می‌زند، مرورگر به طور خودکار سعی می‌کند صفحه را reload کند تا داده‌ها را به سرور بفرستد. اما در بیشتر پروژه‌های مدرن، می‌خواهیم فرم را با جاوااسکریپت بررسی، ذخیره یا هر عملیات دیگری انجام بدهیم و نمی‌خواهیم صفحه ریفرش شود.
اینجاست که باید جلوی رفتار پیش‌فرض فرم را بگیریم؛ با استفاده از متد event.preventDefault().

ساختار کلی:

var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();     // جلوی ارسال واقعی را می‌گیرد
  // اینجا می‌توانی اطلاعات فرم را بخوانی یا اعتبارسنجی انجام بدهی
  alert("فرم شما با موفقیت بررسی شد!");
});

توضیح خط‌به‌خط:

دست‌یابی به فرم:
با document.getElementById('myForm') فرم را می‌گیریم تا روی آن کار کنیم.
اضافه کردن event listener از نوع ‘submit’:
یعنی هر وقت فرم ارسال شد (مثلاً کاربر دکمه ارسال/Enter زد)، تابع ما اجرا شود.
پارامتر event:
شیء‌ای که اطلاعات دقیق درباره رویداد (مثلاً اینکه فرم ارسال شده) به ما می‌دهد.
event.preventDefault():
این خط باعث می‌شود رفتار پیش‌فرض فرم (یعنی ریفرش یا ارسال داده به سرور) اتفاق نیفتد
و ادامه کد ما اجرا شود.
کد دلخواه شما (مثلاً نمایش پیام، اعتبارسنجی، ذخیره…):
بعد از جلوگیری از رفتار پیش‌فرض هر عملیاتی خواستی انجام بده؛ اینجا فقط alert زده‌ایم.

مثال HTML + جاوااسکریپت

<form id="myForm">
  <input type="text" id="myInput" placeholder="یک مقدار وارد کن">
  <button type="submit">ارسال</button>
</form>

var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();                   // جلوی ارسال و رفرش را می‌گیرد
  var value = document.getElementById('myInput').value;
  alert("مقدار ورودی شما: " + value);
});

در این مثال، بعد از زدن “ارسال”

صفحه رفرش نمی‌شود
مقدار ورودی گرفته و نمایش داده می‌شود
می‌توانی به جای alert هر عمل موردنظر (ثبت به localStorage، اعتبارسنجی دلخواه و …) را انجام دهی

جمع‌بندی کاربردی:

همیشه برای مدیریت فرم با JS و جلوگیری از رفرش شدن ناخواسته صفحه، از event.preventDefault() داخل listener رویداد submit استفاده کن.
این تکنیک در اعتبارسنجی client-side، ثبت داده با Ajax یا نمایش پیام سفارشی بسیار مهم است.

this در رویدادها

کلمه this درون تابع رویداد، به همان المان اشاره می‌کند که event روش اتفاق افتاده:

btn.addEventListener("click", function() {
  this.style.backgroundColor = "yellow";
});

اینجا this همان btn است.

تمرین سریع (پیشنهادی)

یک input و دکمه بساز که وقتی دکمه را زدی، مقدار input گرفته شود و به صورت alert نمایش داده شود.

نمونه کد ساده:

<input type="text" id="nameInput">
<button id="showBtn">نمایش</button>

var input = document.getElementById("nameInput");
var showBtn = document.getElementById("showBtn");

showBtn.addEventListener("click", function() {
  alert("نام وارد شده: " + input.value);
});

جمع‌بندی

یاد گرفتی:

رویدادهای مهم در جاوااسکریپت و مفهوم کلی event
اضافه و حذف event listener
تفاوت addEventListener و HTML event attribute
استفاده حرفه‌ای از this در رویداد
جلوگیری از رفتار پیش‌فرض فرم و کاربرد آن

محمد وب‌سایت