این آموزش در تاریخ ۱۳۹۹/۱۱/۱۴ آپدیت شده است.

آموزش متد addEventListener در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد addEventListener در DOM جاوااسکریپت با من همراه باشید.

متد addEventListener در DOM جاوااسکریپت

Free-Learn

متد addEventListener در DOM جاوااسکریپت

با استفاده از متد ()addEventListener میتونیم یه رویداد ( Event ) رو درون یک عنصر در صفحه وب مشخص نماییم. بفرض مثال میخوایم وقتی بروی فلان دکمه کلیک شد یه پیغام به ما نشون داده بشه.

اگه زبان HTML رو دنبال کرده باشید، میدونید که ما رویدادهارو در زبان HTML نیز داریم، رویدادهایی مثه وقتی بروی چیزی کلیک میشه ( OnClick ) یا مثلا وقتی ماوس میره روی چیزی و… ( لیست رویدادهای HTML )

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

مقدار برگشتی هیچی برگشت نمیده
نسخه DOM DOM Level 2 Events

Free-Learn

مثال از این متد

در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : با استفاده از جاوااسکریپت رویداد onclick رو برای یک دکمه تعریف کردیم، یعنی گفتیم وقتی بروی اون دکمه کلیک میشه یک پیغام نشون بده ” سلام خوبی ”

امتحان کنید

مثال شماره ۲ : وقتی ماوس میره ( mouseover ) رو یک باکس پیغام میده ” سلام خوبی؟ ” و وقتی ماوس از روی باکس خارج میشه ( mouseout ) پیغام میده ” بای بای ”

امتحان کنید

مثال شماره ۳ : در مرورگرهایی که از متد ()addEventListener پشتیبانی نمیکنند باید از متد ()attachEvent استفاده کرد.

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام متد Chrome Firefox Opera Safari IE
()addEventListener ۱٫۰ ۱٫۰ ۷٫۰ ۱٫۰ ۹٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.

Free-Learn

جدول پارامترها

در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.

مقدار توضیح
Event_Name ضروری – نام اون رویدادی که قراره بروی عنصر اجرا شه
مثلا click یا mouseover و..
لیست رویدادهای HTML
Function ضروری – اون تابع یا کاری که قراره انجام بشه.
Use_Capture اختیاری – یک مقدار بولی ( یا Boolean ) که نحوه اجرا / انتشار شدن رویداد رو مشخص میکنه.
یعنی عملا ۲ مقدار میتونه داشته باشه :
true : اگه از true استفاده نمایید
اجرا در حالت Capturing ( یا ضبط ) ( از بالا به پایین )
یعنی رویداد از بالا ( ریشه یک صفحه وب ) به سمت پایین عنصر فرزند اجرا میشود.

برای مشاهده در اندازه بزرگتر کلیک کنید.

false : گزینه پیش فرض ( Bubbling ) ( یا حباب ) ( از پایین به بالا )
یعنی رویداد از پایین ( عنصر فرزند ) به سمت بالا ( ریشه یک صفحه وب ) اجرا میشود.
برای مشاهده مثال و تفاوت این ۲ حالت کلیک کنید

Free-Learn

نکات و توضیحات

  • برای حذف کردن یک رویداد از یک عنصر میتوان از متد ()removeEventListener استفاده کرد.
  • استفاده از پارامتر Use_Capture اختیاری می باشد و بصورت پیش فرض مرورگرها خودشون خودکار مقدار این پارامتر رو false مشخص میکنند.
  • پارامتر Use_Capture همواره در مرورگرهای گوگل کروم و اینترنت اکسپلورر و سافاری اختیاری بوده ولی در مرورگر فایرفاکس از نسخه ۶ به بالا و مرورگر اُپرا از نسخه ۱۱٫۶۰ به بالا اختیاری شده.
  • در هنگام وارد کردن نام رویداد نیاز نست از ( پیشوند ) on استفاده نمایید. یعنی اگه نام رویداد onclick هستش شما click وارد کن.
  • در مرورگرهایی که از متد ()addEventListener پشتیبانی نمیکنند باید از متد ()attachEvent استفاده کرد. ( مثال )

Free-Learn

دریافت PDF یا پرینت این مطلب