بازگشت به درس

کدام کنترل‌کننده اجرا شود؟

اهمیت: 5

یک دکمه درون متغیر ذخیره شده. ولی هیچ کنترل‌کننده به آن اختصاص نیافته.

با توجه به کد زیر، کدام کنترل‌کننده بعد از کلیک اجرا می‌شود؟ کدوم پیغام نمایش داده می‌شود؟

button.addEventListener("click", () => alert("1"));

button.removeEventListener("click", () => alert("1"));

button.onclick = () => alert(2);

جواب: 1 و 2.

کنترل‌کننده اول اجرا می‌شود زیرا توسط removeEventListener حذف نمی‌شود. برای حذف کنترل‌کننده باید دقیقا خود تابعی که استفاده کردیم را به ورودی بدهیم. و در این کد یک تابع جدید به عنوان ورودی استفاده شده که فقط شبیه هستند، اما یک تابع نیستند.

برای حذف یک شئ تابع باید آنرا در یک متغیر به عنوان مرجع ذخیره کنیم. مانند:

function handler() {
  alert(1);
}

button.addEventListener("click", handler);
button.removeEventListener("click", handler);

کنترل‌کننده button.onclick جدا و علاوه بر addEventListener کار می‌کند.