javascriptEvent objectشیء رویداد در جاوااسکریپت
شیء رویداد در جاوااسکریپت را بشناسید؛ تفاوت target و currentTarget، نام رویداد و زمان معتبر بودن اطلاعات شنونده را با مثال بررسی کنید.
مفهوم به زبان ساده
تابعی که با addEventListener ثبت می‌کنیم، معمولاً یک شیء event دریافت می‌کند. این شیء اطلاعات همان رخداد را در اختیار تابع می‌گذارد؛ مثلاً type نام رویداد است. نام پارامتر اختیاری است و می‌توان آن را event یا e نوشت؛ نام‌گذاری، شیء تازه‌ای با قابلیت متفاوت نمی‌سازد. اطلاعات در دسترس به نوع رویداد نیز وابسته است؛ رویداد صفحه‌کلید با کلیک دقیقاً یک داده ندارد.
target محل آغاز رویداد را نشان می‌دهد، اما currentTarget عنصری است که شنوندهٔ در حال اجرا روی آن ثبت شده است. در مثال، رویداد از یک دکمه شروع می‌شود و به بخش والد می‌رسد. بنابراین داخل شنوندهٔ والد، این دو مقدار متفاوت‌اند. این تفکیک برای ساخت یک شنونده برای چند فرزند بسیار مفید است و پایهٔ واگذاری رویداد محسوب می‌شود.
currentTarget فقط هنگام اجرای همان شنونده معنا دارد و پس از آن null می‌شود. اگر بعداً به شناسهٔ عنصر نیاز دارید، مقدار لازم را در زمان مناسب بردارید. رویداد برنامه‌ای نمونه، تعامل واقعی ماوس یا صفحه‌کلید را شبیه‌سازی کامل نمی‌کند و معمولاً isTrusted آن false است. برای تمرین، شنونده را روی خود دکمه قرار دهید و پیش‌بینی کنید target و currentTarget چگونه تغییر می‌کنند.
کجا به کار می‌آید؟
- تشخیص اینکه کدام فرزند باعث یک رویداد شده است
- خواندن اطلاعات رخداد بدون متغیر سراسری یا تکیه به نام رویداد
از تعریف تا یک مثال واقعی
const panel = document.createElement('section');
const button = document.createElement('button');
button.type = 'button';
panel.append(button);
const event = new Event('click', { bubbles: true });
panel.addEventListener('click', (event) => {
console.log(event.type);
console.log(event.target === button);
console.log(event.currentTarget === panel);
});
button.dispatchEvent(event);
console.log(event.currentTarget === null);
click true true true
این مثال چطور کار می‌کند؟
دکمه فرزند یک بخش مستقل می‌شود و رویداد قابلیت حبابی دارد.
شنوندهٔ والد نام click و عنصر آغازگر را می‌خواند.
currentTarget هنگام شنونده والد است و پس از dispatch دوباره null می‌شود.
اشتباه رایج
target و currentTarget را یکی ندانید. ذخیرهٔ خود event تضمین نمی‌کند currentTarget بعداً همان عنصر باشد؛ دادهٔ لازم را داخل شنونده بردارید.
این را به خاطر بسپارید
شیء event دربارهٔ یک رخداد است؛ آغازگر رویداد را از محل ثبت شنونده جدا کنید.