این آموزش در تاریخ ۱۴۰۱/۰۴/۲۲ آپدیت شده است.
آموزش متد addEventListener در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد addEventListener در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد addEventListener در DOM جاوااسکریپت
با استفاده از متد ()addEventListener میتونیم یه صفت رویداد ( Event ) رو برای یک تگ مشخص و یا تعریف نماییم. بفرض مثال میخوایم وقتی بروی فلان دکمه کلیک شد یه پیغام به ما نشون داده بشه.
اگه زبان HTML رو دنبال کرده باشید خب میدونید که رویدادها در واقع همون صفت های زبان HTML هستن، رویدادهایی مثه وقتی بروی چیزی کلیک میشه ( OnClick ) یا مثلا وقتی ماوس میره روی چیزی و… ( لیست رویدادهای HTML )
حال ما در زبان جاوا اسکریپت با استفاده از همین متد addEventListener میتونیم به راحتی رویدادهارو در یک تگ / عنصر تعریف و یا مشخص نماییم.
| مقدار برگشتی | هیچی برگشت نمیده |
|---|---|
| نسخه DOM | DOM Level 2 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : با استفاده از جاوااسکریپت رویداد onclick رو برای یک دکمه تعریف کردیم، یعنی گفتیم وقتی بروی اون دکمه کلیک میشه یک پیغام نشون بده ” سلام خوبی ”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> // گرفتن تگ دکمه var MyButton = document.getElementById("MyBtn"); // اضافه کردن رویداد به تگ MyButton.addEventListener("click", MyFunction); // اون تابعی که قراره اجرا بشه function MyFunction(){ alert("سلام خوبی؟"); } </script> |
مثال شماره ۲ : استفاده هم از addEventListener و هم removeEventListener
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function Set(){ var MyButton = document.getElementById("MyBtn"); MyButton.addEventListener("click", MyFunction); } function Del(){ var MyButton = document.getElementById("MyBtn"); MyButton.removeEventListener("click", MyFunction) } function MyFunction(){ alert("سلام خوبی؟"); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()addEventListener | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.addEventListener( Event_Name , Function , Use_Capture); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Event_Name | ضروری – نام اون رویدادی که قراره بروی تگ اجرا شه مثلا onclick یا mouseover و.. پیشوند on دیگه نیاز نیست مشخص کنیم مثلا onclick رو بصورت click مینویسیم لیست رویدادهای HTML |
| Function | ضروری – اون تابعی که قراره اجرا بشه |
| Use_Capture | اختیاری – یک مقدار بولی ( یا Boolean ) که نحوه اجرا شدن رویداد رو مشخص میکنه یعنی عملا ۲ مقدار میتونه داشته باشه true : اگه از true استفاده نمایید اجرا در حالت Capturing ( یا ضبط ) ( از بالا به پایین ) یعنی رویداد از بالا ( ریشه یک صفحه وب ) به سمت پایین عنصر فرزند اجرا میشود  false : گزینه پیش فرض ( Bubbling ) ( یا حباب ) ( از پایین به بالا ) |
Free-Learn
نکات و توضیحات
- برای حذف کردن یک رویداد از یک عنصر میتوان از متد ()removeEventListener استفاده کرد.
- استفاده از پارامتر Use_Capture اختیاری می باشد و بصورت پیش فرض مرورگرها خودشون خودکار مقدار این پارامتر رو false مشخص میکنند.
- در هنگام وارد کردن نام رویداد نیاز نست از ( پیشوند ) on استفاده نمایید. یعنی اگه نام رویداد onclick هستش شما click وارد کن و مشکلی نداره.
