این آموزش در تاریخ ۱۳۹۹/۱۱/۱۴ آپدیت شده است.
آموزش متد removeEventListener در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد removeEventListener در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد removeEventListener در DOM جاوااسکریپت
با استفاده از متد ()removeEventListener همونطور که از اسمش مشخصه ، میتوان یک یا چندین رویداد ست شده بروی یک عنصر رو حذف کرد.
بفرض مثال رویداد تعریف کردیم که وقتی بروی فلان دکمه کلیک شد یه پیغام به ما نشون داده بشه، حال با استفاده از متد removeEventListener میتونیم این رویداد رو حذف کنیم. ( یعنی اگه بروی دکمه کلیک شد دیگه هیچ اتفاقی نمی افته )
اگه زبان HTML رو دنبال کرده باشید، میدونید که ما رویدادهارو در زبان HTML نیز داریم، رویدادهایی مثه وقتی بروی چیزی کلیک میشه ( OnClick ) یا مثلا وقتی ماوس میره روی چیزی و… ( لیست رویدادهای HTML )
برای ست یا تنظیم کردن رویداد به یک عنصر باید از متد ()addEventListener استفاده کرد.
| مقدار برگشتی | هیچی برگشت نمیده |
|---|---|
| نسخه DOM | DOM Level 2 Events |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در این مثال اول اومدیم یه رویداد با استفاده از متد addEventListener برای عنصر تعریف کردیم بعدش اومدیم با استفاده از متد removeEventListener همون رویداد رو حذف کردیم.
وقتی ماوس بروی باکس قرار بگیره یسری اعداد بصورت تصادفی با استفاده از تابع ()Math.random ایجاد میشه، حال وقتی رویداد حذف شه دیگه وقتی ماوس میره روی باکس ،هیچ عددی تولید نمیشه، تموم شد رفت این شد حذف یک رویداد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// برای ست کردن a.addEventListener("mousemove", MyFunction1); function MyFunction1(){ result = document.getElementById("Result"); result.innerHTML = Math.random(); } // برای حذف کردن function Del(){ var a = document.getElementById("Set"); a.removeEventListener("mousemove", MyFunction1); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()removeEventListener | ۱٫۰ | ۱٫۰ | ۷٫۰ | ۱٫۰ | ۹٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.removeEventListener( Event_Name , Function , Use_Capture); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Event_Name | ضروری – نام اون رویدادی که قراره حذف شه مثلا click یا mouseover و.. لیست رویدادهای HTML |
| Function | ضروری – اون تابعی که قراره حذف شه |
| Use_Capture | اختیاری – یک مقدار بولی ( یا Boolean ) که نحوه حذف کردن رویداد رو مشخص میکنه. یعنی عملا ۲ مقدار میتونه داشته باشه : true : اگه از true استفاده نمایید حذف در حالت Capturing ( یا ضبط ) ( از بالا به پایین ) یعنی رویداد از بالا ( ریشه یک صفحه وب ) به سمت پایین عنصر فرزند حذف میشه.  false : گزینه پیش فرض ( Bubbling ) ( یا حباب ) ( از پایین به بالا ) |
Free-Learn
نکات و توضیحات
- برای ست / تنظیم کردن یک رویداد به یک عنصر میتوان از متد ()addEventListener استفاده کرد.
- استفاده از پارامتر Use_Capture اختیاری می باشد و بصورت پیش فرض مرورگرها خودشون خودکار مقدار این پارامتر رو false مشخص میکنند.
- اگه ۲تا رویداد بصورت مجزا با Use_Capture متفاوت تعریف شده باشد، برای حذف آنها نیز باید بصورت مجزا هر۲تای Use_Capture حذف شود. ( یعنی برای true یکی و یکی هم برای false )
- در هنگام وارد کردن نام رویداد نیاز نست از ( پیشوند ) on استفاده نمایید. یعنی اگه نام رویداد onclick هستش شما click وارد کن.
- در مرورگرهایی که از متد ()removeEventListener پشتیبانی نمیکنند باید از متد ()detachEvent استفاده کرد. ( مثال )
