متد Event Listener در جاوااسکریپت

متد addEventListener() در جاوااسکریپت برنامه‌نویس را قادر می‌کند تا توابع را برای هنگامی که یک event مشخصی رخ می‌دهد، تنظیم کند. منظور از event‌، رویداد‌هایی مثل کلیک کردن کاربر روی یک دکمه است. این آموزش به شما نشان می‌دهد که چگونه می‌توانید متد addEventListener() را در کد خود پیاده سازی کنید.

درک رویداد‌ها (Events) و کنترل‌کننده‌های رویداد‌ها (Event Handlers)

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

به عنوان مثال، هنگامی‌ که مرورگر بارگذاری یک صفحه را تمام می‌کند، یک رویداد load (بارگذاری) اتفاق می‌افتد. اگر کاربر در یک صفحه وب، روی یک دکمه کلیک کند، یک رویداد click رخ می‌دهد.

بسیاری از event‌ها می‌توانند یک‌ بار یا چندین بار اتفاق بی‌افتند و حتی شاید هیچوقت رخ ندهند. ممکن است شما ندانید چه رویدادی رخ خواهد داد ، خصوصاً اگر کاربر ایجاد‌کننده‌ی event باشد.

در این سناریوها، برای تشخیص زمان وقوع یک event، به یک کنترل کننده رویداد یا Event Handler نیاز داریم. به این‌ترتیب، می‌توانیم کد جاوااسکریپت را به گونه‌ای تنظیم کنیم که هنگام وقوع event، نسبت به آن‌ واکنش نشان دهد.

جاوااسکریپت چنین کنترل‌کننده‌ی event را در قالب متد addEventListener() ارائه می‌دهد. این کنترل‌کننده به المنتی از کد HTML که میخواهیم event‌های مرتبط با آن‌ را نظارت و کنترل کنیم، متصل می‌شود. برای هر المنتی از HTML می‌توانیم یک یا چندین کنترل‌کننده داشته‌ باشیم.

دستور متد addEventListener()

 

target.addEventListener(event, function)

 

target: المنت موردنظر از HTML است که می‌خواهیم event handler را به آن اضافه کنیم. این المنت بخشی از Document Object Model یا DOM است. در صورتی‌که بخواهید در مورد نحوه انتخاب یک المنت در DOM بیاموزید می‌توانید به این لینک مراجعه کنید.

event: رشته‌ای که نام event را مشخص می‌کند. قبلا event‌های load و click را ذکر کرده‌ایم، برای مشاهده لیست کاملی از event‌های HTML DOM می‌توانید به این لینک مراجعه کنید.

function: تابعی که هنگام رخ‌دادن event می‌خواهیم اجرا شود را مشخص می‌‌کند. این تابع صفحات‌وب را قادر می‌سازد به صورت پویا تغییر کنند.

 

مواردی که نباید از توابع Arrow در جاوااسکریت استفاده کنیم

 

استفاده از رویداد (event) به عنوان پارامتر

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

این مثال نشان می دهد که چگونه می توانیم id المنت را بدست آوریم:

 

button.addEventListener('click', (e)=>{
  console.log(e.target.id)
})

 

در اینجا پارامتر event، یک متغیر به نام e است اما می توان آن را به راحتی هر چیز دیگری مانند خود ‘event’ نامید.

این پارامتر objectای است که شامل اطلاعات مختلفی درباره رویداد مانند id مربوط به target است.

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

 

دوره جامع و پیشرفته جاوااسکریپت

2 پاسخ به “متد Event Listener در جاوااسکریپت”

  1. عاطفه ایمانی گفت:

    مطالبتون عالیه مخصوصا فیلم های اموزشی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

برای اطلاع از به روز رسانی دوره‌ها عضو کانال تلگرام فرانت کست شوید