مقدمه ای بر رویدادهای جاوا اسکریپت – Events in JS

در حوزه برنامه نویسی، به ویژه در جاوا اسکریپت، رویدادها به معنای اعمال یا رخدادهایی هستند که توسط سیستم شناسایی می شوند و به کد شما اجازه می دهند به صورت پویا پاسخ دهند. به عنوان مثال، هنگامی که کاربر روی دکمه صفحه وب کلیک می کند، ممکن است یک هشدار نمایش داده شود یا محتوا به عنوان یک واکنش تغییر کند.

نمونه‌هایی از رویدادها عبارتند از تعاملات کاربر مانند کلیک‌ها، شناور کردن، یا فشار دادن کلید. اتمام بارگذاری صفحه وب؛ فرم های ارسالی؛ و پخش رسانه ها. مجموعه گسترده ای از رویدادهای ممکن به این معنی است که چشم انداز غنی برای بهبود تجربه کاربر پویا وجود دارد.

Event Flow in JavaScriptUser Actionclick, keydown...Elementbutton, input...ListeneraddEventListener⚡Handlerelement.addEventListener('click', handlerFunction)کاربر → عنصر → شنونده → تابع اجرا می‌شودرویدادها شکاف بین محتوای ثابت و تجربیات تعاملی را پر می‌کنند

برای مدیریت یک رویداد، یک کنترل کننده رویداد را به آن متصل می کنید. این یک قطعه کد است، معمولاً یک تابع جاوا اسکریپت که شما نوشته اید، که در پاسخ به رویداد اجرا می شود. این فرآیند به عنوان ثبت کنترل کننده رویداد شناخته می شود.

استفاده از addEventListener()

متد addEventListener() روش ترجیحی برای پیوستتن کنترل کننده رویداد به عناصر است. این اجازه می دهد تا انعطاف پذیری بیشتری داشته باشید، از جمله توانایی اتصال چندین کنترل کننده رویداد به یک رویداد واحد.

مثال با addEventListener():

const button = document.querySelector("button"); function changeColor() {   document.body.style.backgroundColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; } button.addEventListener("click", changeColor);
  • document.querySelector("button") دکمه را از سند انتخاب می کند.
  • addEventListener یک کنترل کننده رویداد را برای رویداد "کلیک" متصل می کند.
  • با کلیک روی این تابع، رنگ پس‌زمینه بدنه به رنگ تصادفی تغییر می‌کند.

گسترش افق رویداد

فراتر از کلیک ها، عناصر می توانند رویدادهای مختلفی را تحریک کنند. با مشاهده تغییرات تعامل، با جایگزین کردن "click" با رویدادهایی مانند "mouseover"، "focus" یا "dblclick" در کدتان آزمایش کنید.

حذف شنوندگان رویداد

همانطور که می توانید کنترل کننده های رویداد را با addEventListener() ضمیمه کنید، می توانید آنها را با removeEventListener() حذف کنید. این می تواند برای مدیریت حافظه و عملکرد در برنامه های پیچیده تر بسیار مهم باشد.

انتشار رویداد: حباب زدن و گرفتن

انتشار رویداد در DOM می تواند به دو صورت اتفاق بیفتد: حباب (Bubbling) و ضبط (Capturing). به‌طور پیش‌فرض، رویدادها از عنصر هدف تا ریشه درخت سند حباب می‌شوند. گرفتن عکس برعکس است، جایی که رویداد از ریشه به سمت عنصر هدف حرکت می کند.

قدرت نمایندگی رویداد

تفویض رویداد از حباب رویداد برای تنظیم یک شنونده رویداد بر روی یک عنصر والد استفاده می کند که می تواند رویدادهای چند فرزند را مدیریت کند. برای مدیریت رویدادهای مشابه در بسیاری از عناصر کارآمد است.

رویدادهای فراتر از صفحه وب

در حالی که این بحث بر رویدادهای وب متمرکز است، شایان ذکر است که مدل رویداد جاوا اسکریپت در محیط‌های مختلف، مانند Node.js یا برنامه‌های افزودنی مرورگر، متفاوت است. هر زمینه ممکن است ویژگی های مدیریت رویداد منحصر به فردی داشته باشد.

درک رویدادها و مدیریت آنها برای توسعه وب پویا بسیار مهم است. رویدادها شکاف بین محتوای ثابت و تجربیات تعاملی را پر می کنند.

سناریوی عملی: گالری تصاویر تعاملی

در این سناریو، یک گالری عکس تعاملی ساده ایجاد خواهیم کرد. هنگامی که کاربر روی یک تصویر کوچک کلیک می کند، تصویر در اندازه کامل در یک منطقه مشخص نمایش داده می شود. این مثال مفهوم تفویض رویداد را نشان می‌دهد.

ساختار HTML:

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Interactive Image Gallery</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <div id="gallery">     <img class="thumbnail" src="thumbnail1.jpg" alt="Thumbnail 1">     <img class="thumbnail" src="thumbnail2.jpg" alt="Thumbnail 2">     <img class="thumbnail" src="thumbnail3.jpg" alt="Thumbnail 3">   </div>   <div id="main-image">     <img src="placeholder.jpg" alt="Main Image">   </div>   <script src="script.js"></script> </body> </html>

CSS (style.css)

#gallery {   display: flex;   justify-content: space-around;   margin-bottom: 20px; } .thumbnail {   width: 100px;   cursor: pointer;   transition: transform 0.2s ease; } .thumbnail:hover {   transform: scale(1.1); } #main-image img {   width: 90%;   display: block;   margin: 0 auto; }

جاوا اسکریپت (script.js):

document.getElementById('gallery').addEventListener('click', function(event) {   // Checking if the clicked element is a thumbnail   if (event.target.className === 'thumbnail') {     // Retrieving the source of the clicked thumbnail     const newSrc = event.target.src.replace('thumbnail', 'fullsize');     // Updating the main image's source     document.querySelector('#main-image img').src = newSrc;   } });

این مثال عملی نحوه استفاده از تفویض رویداد برای مدیریت موثر رویدادها را نشان می‌دهد، به‌ویژه زمانی که با چندین عنصر مشابه مانند گالری تصاویر سروکار دارید. به جای اضافه کردن شنونده رویداد به هر تصویر کوچک، یک شنونده به عنصر والد #gallery متصل می‌کنیم.

آزمون / Quiz

سوال ۱: کدام متد برای اضافه کردن شنونده رویداد استفاده می‌شود؟ +
attachEvent()
✅ addEventListener()
addEventListener() روش استاندارد و مدرن برای ثبت کنترل‌کننده‌های رویداد در جاوا اسکریپت است.
onClick()

سوال ۲: Event Bubbling چیست؟ +
✅ رویداد از عنصر هدف به سمت ریشه حرکت می‌کند
در Bubbling، رویداد از عنصر داخلی به عناصر والد حرکت می‌کند. این امکان تفویض رویداد را فراهم می‌کند.
رویداد از ریشه به عنصر هدف حرکت می‌کند
رویداد متوقف می‌شود

سوال ۳: تفویض رویداد (Event Delegation) چه مزیتی دارد؟ +
کد را کندتر می‌کند
✅ به جای چند شنونده، یک شنونده روی عنصر والد قرار می‌گیرد
تفویض رویداد با استفاده از Bubbling، یک شنونده روی عنصر والد قرار می‌دهد که رویدادهای چندین فرزند را مدیریت می‌کند — کارآمدتر و کم‌حافظه‌تر.
رویدادها را حذف می‌کند

نکات کلیدی / Key Takeaways

  • رویدادها اعمال کاربر هستند: کلیک، فشار کلید، شناور کردن، بارگذاری صفحه
  • addEventListener() — روش استاندارد برای ثبت شنونده رویداد
  • removeEventListener() — حذف شنونده برای مدیریت حافظه
  • Bubbling: رویداد از عنصر هدف به ریشه حرکت می‌کند
  • Capturing: رویداد از ریشه به عنصر هدف حرکت می‌کند
  • Event Delegation: یک شنونده روی والد، رویدادهای چندین فرزند را مدیریت می‌کند