متد 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 می‌خواهیم اجرا شود را مشخص می‌‌کند. این تابع صفحات‌وب را قادر می‌سازد به صورت پویا تغییر کنند.

[button class=”github-btn” href=”http://frontcast.ir/when-not-to-use-arrow-functions”]مواردی که نباید از توابع Arrow در جاوااسکریت استفاده کنیم[/button]

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

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

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

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

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

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

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

[button class=”github-btn” href=”http://frontcast.ir/course/javascript-advanced”]دوره جامع و پیشرفته جاوااسکریپت[/button]

دیدگاه‌ها:

ziba

مرداد 7, 1402  در  10:04 ق.ظ

عالی بود ممنون

برای پاسخ دادن وارد شوید

آرمان

مهر 22, 1400  در  12:23 ب.ظ

سلام ممنون عالی بود.

برای پاسخ دادن وارد شوید

مسعود صدری

مهر 23, 1400  در  12:22 ق.ظ

سلام
خیلی ممنونم.

Mohammad Ali

بهمن 29, 1399  در  11:39 ق.ظ

خیلی عالی بود . دستتون درد نکنه

برای پاسخ دادن وارد شوید

مسعود صدری

بهمن 29, 1399  در  3:14 ب.ظ

ممنون از شما.

عاطفه ایمانی

مهر 10, 1399  در  11:58 ق.ظ

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

برای پاسخ دادن وارد شوید

مسعود صدری

مهر 10, 1399  در  3:58 ب.ظ

سلام
ممنونم از لطفتون.

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.