شنونده رویداد (DOM Event Listener)
«شنونده رویداد (Event Listener)» یعنی گوش دادن به یک اتفاق؛ مثل کلیک. با آن، جاوااسکریپت موقع رویداد، کد اجرا می کند؛ درست مثل اعلان بازی وقتی دکمه را می زنی.
addEventListener چیست؟
متد «addEventListener» روی یک عنصر تنظیم می شود. سپس، هنگام رویداد، تابع شما اجرا می شود و رویدادهای قبلی هم پاک نمی شوند.
const btn = document.getElementById("myBtn");
function displayDate() {
console.log(new Date());
}
btn.addEventListener("click", displayDate);
سینتکس و پارامترها
سه ورودی داریم: نام رویداد، تابع هندلر، و «useCapture» برای مسیر رویداد. «حبابی سازی (Bubbling)» از داخل به بیرون است؛ «کپچر (Capturing)» برعکس.
const el = document.getElementById("target");
function handler(evt) {
console.log("event:", evt.type);
}
el.addEventListener("mousedown", handler, false);
el.addEventListener("mouseup", handler, true);
افزودن چند هندلر به یک عنصر
می توان چند هندلر هم نوع یا متفاوت ثبت کرد. هیچ کدام دیگری را پاک نمی کند.
const box = document.getElementById("box");
function flash() {
console.log("flash");
}
function logClick() {
console.log("clicked");
}
box.addEventListener("click", flash);
box.addEventListener("click", logClick);
box.addEventListener("mouseover", flash);
لیسنر روی window و document
هر شی DOM رویداد دارد؛ مثل «window». هنگام تغییر اندازه، واکنش بده.
function onResize() {
const info = document.getElementById("demo");
info.innerHTML = window.innerWidth + "x" + window.innerHeight;
}
window.addEventListener("resize", onResize);
حذف شنونده با removeEventListener
برای حذف، همان تابعِ نام دار را بده. باید دقیقاً همان مرجع باشد.
function moveHandler() {
console.log("moving");
}
const area = document.getElementById("area");
area.addEventListener("mousemove", moveHandler);
area.removeEventListener("mousemove", moveHandler);
ارسال پارامتر به هندلر
برای پارامتر، یک تابع بی نام بساز؛ داخلش تابع اصلی را با ورودی ها صدا بزن.
function greet(name) {
console.log("Hello " + name);
}
const btn2 = document.getElementById("greetBtn");
btn2.addEventListener("click", function () {
greet("Amir");
});
گام های عملی
- عنصر را با
getElementByIdبگیر. - هندلر کوتاه و واضح بنویس.
addEventListenerرا ست کن و تست بگیر.
نکته: برای حذف لیسنر، تابع نام دار نگه دار. مرجع عوض شود، حذف نمی شود.
لینک های مرتبط
- رویدادهای DOM؛ مقدمات رویدادها.
- پیمایش DOM؛ یافتن عناصر هدف لیسنر.
جمع بندی سریع
- addEventListener رویدادها را روی هم نگه می دارد.
- useCapture جهت انتشار رویداد را تعیین می کند.
- برای حذف، تابع همان باشد.
- می توان روی window هم گوش داد.