addeventlistener در جاوا اسکریپت – به زبان ساده + مثال

زبان برنامه نویسی جاوا اسکریپت رابطی به نام «EventTarget» دارد که چندین متد برای مدیریت رویدادها در اشیا «DOM» ارائه می‌دهد. در میان این متدها، AddEventListener در جاوا اسکریپت اهمیت ویژه‌ای دارد، زیرا به برنامه‌نویسان اجازه می‌دهد تا رفتاری را که باید هنگام وقوع «رویدادهای» (Eventهای) خاص رخ دهد، مشخص کنند. این متُد می‌تواند برای تعریف مدیریت رویداد در طیف گسترده‌ای از اشیا که رویدادها را پشتیبانی می‌کنند، از جمله «AudioNode» ،«AudioContext» و «XMLHttpRequest» استفاده شود. با استفاده از متد AddEventListener توسعه‌دهندگان به راحتی می‌توانند قطعه کدهای سفارشی ایجاد کنند که به رویدادهای خاص به شیوه‌ای انعطاف‌پذیر و کارآمد پاسخ می‌دهد.

در این مطلب از «مجله فرادرس» در رابطه با AddEventListener در جاوا اسکریپت و ابعاد مختلف آن توضیحاتی ارائه خواهد شد تا در پایان کاربران درک مطلوبی از آن به دست بیاورند.

AddEventListener در جاوا اسکریپت چیست ؟

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

همچنین با استفاده از آن امکان اعمال چندین کنترل کننده رویداد برای یک عنصر، مانند اختصاص دو رویداد کلیک به عنصری خاص وجود دارد. متد AddEventListener در زبان جاوا اسکریپت را می‌توان برای هر شی DOM، نه تنها برای عناصر HTML بلکه برای شی پنجره نیز اعمال کرد.

علاوه بر این، متد نام برده در جاوا اسکریپت می‌تواند نحوه واکنش رویداد به «حباب‌سازی» (Bubbling) را کنترل کرده و سفارشی‌سازی مدیریت رویداد را آسان‌تر کند.

با استفاده از متد addEventListener() ، جاوا اسکریپت از زبان نشانه‌گذاری HTML جدا خواهد شد و در نتیجه کد تمیز و خواناتری به دست می‌آید. این متد همچنین امکان اضافه کردن شنونده‌های رویداد را نیز بدون کنترل نشانه‌گذاری HTML فراهم می‌کند. علاوه بر این، از متد removeEventListener()‎ می‌توان برای حذف آسان کنترل‌کننده‌های رویداد استفاده کرد.

مزایای AddEventListener در جاوا اسکریپت چیست؟

با متد AddEventListener در جاوا اسکریپت، افزودن رویدادها به اشیا کار ساده‌ای خواهد بود. این متد همچنین به چندین شنونده رویداد اجازه می‌دهد تا به شیئی واحد اضافه شوند، حتی اگر از یک نوع نباشند.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

سینتکس AddEventListener در جاوا اسکریپت

سینتکس AddEventListener در جاوا اسکریپت به صورت زیر است:

1element.addEventListener(event, functionName, useCapture);

در ادامه توضیح جامعی از هر یک از متغیرهای موجود در سینتکس فوق ارائه شده است:

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

1. «عنصر» (Element): این مؤلفه می‌تواند هر عنصری در DOM فعلی یا شیئی مانند پنجره یاXMLHttpRequest باشد که از مدیریت رویداد پشتیبانی می‌کند.
2. «رویداد» (Event): رویداد نوعی «رشته» (استرینگ | String) حساس به حروف بزرگ و کوچک است که رویدادی را مشخص می‌کند که عمل در آن انجام می‌شود. نمونه‌هایی از رویدادها عبارت‌اند از رویداد کلیک، رویدادهای ماوس و بسیاری از موارد دیگر و برای اجرای صحیح رویداد باید اطمینان حاصل شود که رشته به درستی نوشته شده است.
3. «نام تابع» (FunctionName): تابعی است که کد واقعی را تعریف می‌کند که هنگام وقوع رویداد مشخص شده اجرا می‌شود. تابع می‌تواند نام‌گذاری شده یا ناشناس باشد.
4. «UseCapture»: این مؤلفه نوعی پارامتر «بولی» (Boolean) به حساب می‌آید که به طور پیش‌فرض رویFalse تنظیم شده است.UseCapture مشخص می‌کند که آیا ماهیت اجرای رویداد در ساختار والد-فرزند، ثبت رویداد یا حباب است. اگر کاربر بخواهد نوع اجرای رویداد را ثبت کند، می‌تواند این پارامتر را رویTrue قرار دهد.

نکته: پارامترUseCaptureدر متد AddEventListener ترتیب پردازش رویداد در سلسله‌مراتب DOM را مشخص می‌کند. وقتی روی Trueتنظیم شود، نشان می‌دهد که رویداد باید در مرحله ثبت، از عنصر والد تا عنصر هدف اجرا شود. وقتی روی False (پیش‌فرض) تنظیم می‌شود، رویداد در مرحله حبابی اجرا خواهد شد.

مثالی از AddEventListener در جاوا اسکریپت

مثالی از AddEventListener در جاوا اسکریپت به صورت قطعه کد زیر است:

1<!DOCTYPE html>
2<html>
3<body>
4<p dir="rtl">این مثال عملکرد addEventListener را با فراخوانی متدی برای هشدار دادن به یک پیام در هنگام کلیک روی دکمه نشان می دهد</p>
5<button id="demoButton">پیغام امروز</button>
6<script>
7document.getElementById("demoButton").addEventListener("click", function(){ alert("صبح بخیر! روز خوبی در پیش رو داشته باشید");
8});
9</script>
10</body>
11</html>

خروجی قطعه کد فوق به صورت تصویر زیر است:

کاربر بعد از کلیک روی دکمه پیغام زیر را دریافت خواهد کرد:

در زیر برخی از کاربردهای مهم متد AddEventListener در جاوا اسکریپت ذکر خواهند شد.

١- تعریف توابع با AddEventListener برای مدیریت رویداد

در جاوا اسکریپت، دو روش برای تعریف تابعی وجود دارد که هنگام وقوع رویدادی خاص اجرا می‌شود. روش اول، تعریف مستقیم «تابع ناشناس» (Anonymous Functions) است که اقداماتی را که باید در هنگام وقوع رویداد انجام شود، مشخص می‌کند.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

1<!DOCTYPE html>
2<html>
3<body>
4<p dir="rtl">این متد‌ها نشان می‌دهند که توابع ناشناس و همچنین تابع دارای نام را می‌توان با کنترل‌کننده رویداد addEventListener استفاده کرد.</p>
5<p id="anonymousFuncOutput"></p>
6<p id="namedFuncOutput"></p>
7<button id="demoButton">آزمایش کردن</button>
8</body>
9<script type="text/javascript"> document.getElementById("demoButton").addEventListener("click", function(){
10document.getElementById("anonymousFuncOutput").innerHTML = "خروجی تابع ناشناس";
11});
12document.getElementById("demoButton").addEventListener("click", myNamedFunction);
13function myNamedFunction() {
14document.getElementById("namedFuncOutput").innerHTML = "خروجی تابع نام دار";
15}
16</script>
17</html>

خروجی قطعه کد بالا پس از اجرا به صورت تصویر زیر است.

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

٢- اختصاص چندین رویداد به یک عنصر

ممکن است کاربر بخواهد چندین کنترل کننده رویداد به عنصر یا شیئی که از مدیریت رویداد پشتیبانی می‌کند، مانند «AudioNode» یا «AudioContext» اضافه کند. در بخش قبل دیدیم که چگونه می‌توان عنصری خاص را با توابع یا اجراهای مختلف به رویدادی اختصاص داد.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

برای مثال، دکمه demoButton به عنوان نوعی رویداد کلیک دو بار با هر دو تابع ناشناس و تابع دارای نام اختصاص داده شد. همچنین می‌توان چندین رویداد مختلف را به یک شی اضافه کرد، که این کار امکان مدیریت رویدادها را بیشتر می‌کند. مثال زیر برای درک این موضوع بسیار مهم است.

1<!DOCTYPE html>
2<html>
3<body>
4<p dir= "rtl">این متدها نشان می‌دهند که کنترل‌کننده‌های رویداد چندگانه addEventListener را می‌توان برای یک عنصر تعریف کرد.</p>
5<p id="singleElement">محتوای پیش فرض</p>
6<button id="demoButton">آزمایش کردن</button>
7</body>
8<script type="text/javascript">
9var demoButtonElement = document.getElementById("demoButton"); demoButtonElement.addEventListener("mouseover", mouseOverFunction); demoButtonElement.addEventListener("click", clickFunction); demoButtonElement.addEventListener("mouseout", mouseOutFunction);
10function mouseOverFunction() {
11document.getElementById("singleElement").innerHTML = "Mouseover رویداد  ";
12}
13function clickFunction() {
14document.getElementById("singleElement").innerHTML = "click رویداد ";
15}
16function mouseOutFunction() {
17document.getElementById("singleElement").innerHTML = "mouseOut رویداد ";
18}
19</script>
20</html>

خروجی قطعه کد فوق به صورت تصویر زیر است.