javascriptEvent listenerرویداد در جاوااسکریپت
addEventListener در جاوااسکریپت یک تابع را هنگام رویداد اجرا می‌کند. ثبت و حذف شنوندهٔ کلیک و فرق دادن تابع با فراخوانی آن را با مثال ببینید.
مفهوم به زبان ساده
رویداد، خبری از یک اتفاق است؛ مثلاً کلیک دکمه، تایپ در ورودی یا ارسال فرم. با addEventListener مشخص می‌کنیم در برابر رویدادی با نام معین، کدام تابع اجرا شود. ثبت شنونده به معنی اجرای فوری آن تابع نیست. برنامه تابع را تحویل می‌دهد تا محیط در زمان رویداد آن را فراخوانی کند. این تابع معمولاً یک شیء event هم دریافت می‌کند که اطلاعات رویداد در آن است.
در مثال، دکمه‌ای مستقل می‌سازیم و تابع countClick را برای رویداد click ثبت می‌کنیم. برای اینکه نتیجه قابل تکرار باشد، خود کد دو بار click را فراخوانی می‌کند؛ نیازی به کلیک دستی نیست. پس از حذف شنونده، کلیک سوم دیگر شمارنده را افزایش نمی‌دهد. همین الگو کمک می‌کند هنگام کنارگذاشتن یک بخش رابط، رفتارهای وابسته به آن را هم پاک‌سازی کنید.
برای removeEventListener باید همان تابع ثبت‌شده و مقدار سازگار capture را به کار ببرید. نوشتن یک تابع تازه با متن مشابه، همان مرجع قبلی نیست. نام رویداد معمولاً click است، نه onclick. برای دکمهٔ واقعی، عنصر button تجربهٔ صفحه‌کلید بهتری از یک div با رفتار کلیک دارد. این نمونه روی عنصر جدا از سند اجرا می‌شود و رابط سایت را تغییر نمی‌دهد؛ در برنامهٔ واقعی باید عنصر قابل مشاهده و وضعیت آن را نیز درست طراحی کنید.
کجا به کار می‌آید؟
- واکنش به دکمه‌ها، ورودی فرم و ارسال فرم
- حذف رفتار ثبت‌شده هنگام پایان عمر یک بخش رابط
از تعریف تا یک مثال واقعی
// در کنسول مرورگر اجرا کنید؛ کلیک دستی لازم نیست.
const button = document.createElement('button');
button.type = 'button';
button.textContent = 'افزودن';
let count = 0;
function countClick() {
count += 1;
}
button.addEventListener('click', countClick);
button.click();
button.click();
console.log(count);
button.removeEventListener('click', countClick);
button.click();
console.log(count);
2 2
این مثال چطور کار می‌کند؟
دکمهٔ مستقل و شمارنده با مقدار صفر ساخته می‌شوند.
addEventListener خود تابع countClick را ثبت می‌کند، بدون اجرای آن.
دو click برنامه‌ای، شمارنده را به ۲ می‌رسانند.
removeEventListener همان تابع را حذف می‌کند؛ کلیک بعدی تغییری ایجاد نمی‌کند.
اشتباه رایج
در ثبت شنونده، countClick را بدهید، نه countClick(). شکل دوم تابع را همان لحظه اجرا می‌کند و نتیجهٔ آن را می‌فرستد. برای حذف شنونده نیز باید مرجع همان تابع ثبت‌شده را نگه دارید.
این را به خاطر بسپارید
شنونده یک تابع منتظر رویداد است؛ آن را ثبت کنید، نه اینکه هنگام ثبت فراخوانی‌اش کنید.