رویدادها و شیء Event

مقدمه

به فصل «رویدادها» خوش آمدید. رویدادها یا Events، سیگنال‌هایی هستند که توسط مرورگر برای اطلاع‌رسانی از وقوع یک اتفاق در صفحه وب ارسال می‌شوند. این اتفاق می‌تواند یک تعامل از سوی کاربر باشد (مانند کلیک کردن یک دکمه، فشردن یک کلید کیبورد، یا حرکت دادن ماوس) یا یک اتفاق در خود مرورگر (مانند اتمام بارگذاری کامل صفحه یا تغییر اندازه پنجره). جاوااسکریپت به ما این قدرت را می‌دهد که به این رویدادها "گوش" دهیم و در پاسخ به آنها، کدی را اجرا کنیم. این مدل که به آن «برنامه‌نویسی رویداد-محور» (Event-Driven Programming) می‌گویند، اساس ساخت صفحات وب تعاملی و پویا است.

Event Handlers (شنوندگان رویداد)

یک شنونده رویداد (Event Handler یا Event Listener) تابعی است که ما تعریف می‌کنیم تا در زمان وقوع یک رویداد خاص روی یک عنصر خاص، اجرا شود. روش‌های مختلفی برای اختصاص دادن یک تابع به یک رویداد وجود دارد.

روش‌های قدیمی (نامناسب)

دو روش قدیمی برای اتصال رویدادها وجود دارد که امروزه استفاده از آنها توصیه نمی‌شود:

1. اتریبیوت HTML خطی: در این روش، کد جاوااسکریپت مستقیماً داخل اتریبیوت‌های HTML مانند onclick نوشته می‌شود. این کار باعث ترکیب شدن ساختار (HTML) و رفتار (JavaScript) شده و نگهداری کد را بسیار دشوار می‌کند.
2. پراپرتی روی شیء DOM: در این روش، یک تابع به پراپرتی مربوط به رویداد روی شیء عنصر اختصاص داده می‌شود (مثلاً element.onclick). این روش بهتر از حالت خطی است، اما محدودیت بزرگ آن این است که به هر رویداد روی یک عنصر، تنها می‌توان یک تابع شنونده اختصاص داد.

HTML

<!-- 1. Inline handler (not recommended) -->
<button onclick="alert('You clicked me!');">Click Me</button>

مثال بالا روش خطی را نشان می‌دهد که باید از آن اجتناب کرد.

روش مدرن: addEventListener()

روش استاندارد، مدرن و توصیه‌شده برای مدیریت رویدادها، استفاده از متد addEventListener() است. این متد روی هر گره DOM قابل فراخوانی است و مزایای مهمی دارد:

• امکان افزودن چندین شنونده به یک رویداد واحد روی یک عنصر.
• جداسازی کامل کد جاوااسکریپت از نشانه‌گذاری HTML.
• ارائه کنترل بیشتر روی فازهای مختلف رویداد (capturing و bubbling) که در آینده به آن خواهیم پرداخت.

سینتکس اصلی این متد به شکل element.addEventListener('type', listener) است که type نام رویداد (مثلاً 'click') و listener تابع شنونده است.

JAVASCRIPT

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

function handleClick() {
    console.log('Button was clicked!');
}
function anotherHandler() {
    console.log('This also runs on click!');
}

// Attach both handlers to the same event
myButton.addEventListener('click', handleClick);
myButton.addEventListener('click', anotherHandler);

// To remove a listener, use removeEventListener
// myButton.removeEventListener('click', handleClick);

در این کد، دو تابع مختلف به رویداد click یک دکمه متصل شده‌اند و هر دو هنگام کلیک اجرا می‌شوند. برای حذف یک شنونده با removeEventListener()، باید حتماً به تابع اصلی (و نه یک تابع ناشناس) ارجاع داشته باشیم.

شیء event

وقتی یک رویداد رخ می‌دهد و تابع شنونده ما فراخوانی می‌شود، مرورگر به صورت خودکار یک شیء به نام شیء event را به عنوان اولین آرگومان به آن تابع پاس می‌دهد. این شیء حاوی اطلاعات ارزشمندی درباره رویدادی است که اتفاق افتاده.

برخی از مهم‌ترین پراپرتی‌ها و متدهای این شیء عبارتند از:

• type: نوع رویداد را به صورت رشته برمی‌گرداند (مثلاً 'click' یا 'keydown').
• target: به عنصری که رویداد مستقیماً روی آن رخ داده است، اشاره می‌کند. این پراپرتی بسیار مفید است.
• currentTarget: به عنصری که شنونده رویداد به آن متصل شده است، اشاره می‌کند (در بسیاری از موارد با target یکسان است).
• preventDefault(): یک متد که از اجرای رفتار پیش‌فرض مرورگر برای آن رویداد جلوگیری می‌کند. برای مثال، از دنبال کردن لینک یک <a> یا ارسال یک <form>.
• stopPropagation(): از انتشار رویداد به عناصر والد (event bubbling) جلوگیری می‌کند.

JAVASCRIPT

const link = document.getElementById('myLink');

link.addEventListener('click', function(event) {
    // The 'event' object is automatically passed to the handler
    console.log('Event type:', event.type);
    console.log('Target element:', event.target);
    
    // Prevent the link from navigating to the new page
    event.preventDefault();
    
    console.log('Default navigation behavior was prevented.');
});

در این مثال، وقتی روی لینک کلیک می‌شود، تابع شنونده شیء event را دریافت می‌کند. ما اطلاعاتی از آن را در کنسول ثبت کرده و سپس با event.preventDefault() از باز شدن آدرس لینک جلوگیری می‌کنیم.

در این درس با مفاهیم بنیادی رویدادها، شنوندگان و شیء event آشنا شدیم. این‌ها بلوک‌های سازنده اصلی برای تعامل در وب هستند. addEventListener() روش استاندارد برای اتصال رفتار به عناصر است و شیء event اطلاعات زمینه‌ای لازم برای مدیریت هوشمندانه آن تعاملات را فراهم می‌کند. در درس بعدی، به بررسی دسته‌های مختلف رویدادهایی که می‌توانیم به آنها گوش دهیم، از جمله رویدادهای ماوس، کیبورد، فرم و صفحه، خواهیم پرداخت.