شبیه‌سازی رویدادها

مقدمه

در حالت عادی، رویدادها توسط کاربر یا مرورگر ایجاد می‌شوند. اما شرایطی وجود دارد که در آنها می‌خواهیم یک رویداد را به صورت برنامه‌نویسی و از طریق کد خودمان ایجاد و اجرا کنیم. به این کار «شبیه‌سازی» یا «ارسال» (dispatching) رویداد می‌گویند. این تکنیک برای تست خودکار رابط کاربری (مثلاً برای اطمینان از صحت عملکرد یک دکمه)، اتوماسیون وظایف (مثلاً باز کردن یک منو به محض بارگذاری صفحه) یا برای ایجاد زنجیره‌ای از واکنش‌ها در یک اپلیکیشن پیچیده، بسیار مفید است.

شبیه‌سازی یک رویداد ساده

روش استاندارد و مدرن برای شبیه‌سازی رویدادها شامل دو مرحله‌ی ساده است:

1. ساخت یک شیء رویداد: ابتدا باید یک نمونه از شیء رویداد مورد نظر را با استفاده از سازنده‌ی آن (مانند new Event() یا new MouseEvent()) بسازیم.
2. ارسال رویداد: سپس، متد dispatchEvent() را روی عنصر هدفی که می‌خواهیم رویداد روی آن اجرا شود، فراخوانی می‌کنیم و شیء رویداد ساخته شده را به آن می‌دهیم.

بیایید با یک مثال ساده شروع کنیم. می‌خواهیم یک رویداد click را روی یک دکمه شبیه‌سازی کنیم.

JAVASCRIPT

const myButton = document.getElementById('my-btn');

// 1. Attach a standard event listener to the button
myButton.addEventListener('click', (event) => {
    console.log('Button was clicked!');
    console.log('Is this a trusted event?', event.isTrusted);
});

// 2. Create a new 'click' event object
const customClickEvent = new Event('click');

// 3. Dispatch the event on the button after 2 seconds
setTimeout(() => {
    console.log('Dispatching click event programmatically...');
    myButton.dispatchEvent(customClickEvent);
}, 2000);

در این کد، ابتدا یک شنونده برای رویداد click روی دکمه تعریف می‌کنیم. سپس یک شیء رویداد از نوع click می‌سازیم. در نهایت، پس از دو ثانیه، با فراخوانی dispatchEvent()، این رویداد را روی دکمه "شلیک" می‌کنیم. این کار باعث می‌شود تابع شنونده ما دقیقاً مانند زمانی که کاربر روی دکمه کلیک کرده، اجرا شود.

به پراپرتی isTrusted در خروجی کنسول توجه کنید. این پراپرتی برای رویدادهای واقعی که توسط کاربر ایجاد می‌شوند، مقدار true و برای رویدادهای شبیه‌سازی شده، مقدار false دارد.

شبیه‌سازی رویدادهای پیچیده‌تر

برای رویدادهای ساده مانند click، سازنده‌ی `Event` کافی است. اما برای رویدادهایی که اطلاعات بیشتری با خود حمل می‌کنند (مانند رویدادهای ماوس که مختصات دارند یا رویدادهای کیبورد که اطلاعات کلید فشرده شده را دارند)، باید از سازنده‌های اختصاصی‌تری مانند `MouseEvent` یا `KeyboardEvent` استفاده کنیم. این سازنده‌ها یک آرگومان دوم به صورت یک شیء options قبول می‌کنند که می‌توانیم جزئیات رویداد را در آن مشخص کنیم.

شبیه‌سازی رویداد ماوس با جزئیات

در مثال زیر، یک رویداد کلیک ماوس با مختصات مشخص `X` و `Y` شبیه‌سازی می‌کنیم.

JAVASCRIPT

const myDiv = document.getElementById('interactive-div');

myDiv.addEventListener('click', (event) => {
    console.log(`Clicked at coordinates: X=${event.clientX}, Y=${event.clientY}`);
});

// Create a MouseEvent with specific options
const detailedClick = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    clientX: 150,
    clientY: 100
});

// Dispatch it after 1 second
setTimeout(() => myDiv.dispatchEvent(detailedClick), 1000);

در اینجا، با استفاده از سازنده‌ی `MouseEvent`، یک رویداد کلیک با مختصات `X=150` و `Y=100` ایجاد کرده‌ایم. وقتی این رویداد ارسال می‌شود، تابع شنونده ما به این مختصات شبیه‌سازی شده دسترسی خواهد داشت. پراپرتی‌های bubbles و cancelable نیز به ترتیب مشخص می‌کنند که آیا رویداد باید در درخت DOM به سمت بالا منتشر شود و آیا می‌توان با preventDefault() از رفتار پیش‌فرض آن جلوگیری کرد یا خیر.

در این درس یاد گرفتیم که چگونه رویدادها را به صورت برنامه‌نویسی با استفاده از سازنده‌های `Event` و متد dispatchEvent() شبیه‌سازی کنیم. این تکنیک برای تست و اتوماسیون بسیار مفید است. با این درس، فصل «رویدادها» به پایان می‌رسد. ما در این فصل با ماهیت رویدادها، روش‌های مدیریت آنها، انواع مختلف رویدادها و نحوه شبیه‌سازی آنها آشنا شدیم و اکنون ابزارهای لازم برای ساخت صفحات وب کاملاً تعاملی را در اختیار داریم.