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

۹۸۴ بازدید
آخرین به‌روزرسانی: ۲۴ اردیبهشت ۱۴۰۲
زمان مطالعه: ۸ دقیقه
addeventlistener در جاوا اسکریپت – به زبان ساده + مثال

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

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

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

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

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

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

مفهوم AddEventListener

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

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

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

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

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

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

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

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

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

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

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

مثالی از 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 در جاوا اسکریپت

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

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

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

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

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

تعریف توابع با adEventListener

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

آموزش addEventListener

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

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

برای مثال، دکمه 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>

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

رویداد چندگانه در جاوا اسکریپت

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

کار با addEventListener

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

کاربرد addEventListener در زبان جاوا اسکریپت

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

رویداد چندگانه در جاوا اسکریپت

٣- ارسال پارامترها با AddEventListener در جاوا اسکریپت

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

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

1<!DOCTYPE html>
2<html>
3<body>
4<p dir="rtl">این متدها نشان می‌دهند که چگونه می‌توان پارامترها را در addEventListener با فراخوانی متدی ارسال کرد که به نوبه خود متد موردنظر ما را با پارامترها فراخوانی می‌کند. </p>
5<p id="multipliedResult"></p>
6<button id="demoButton">آزمایش کردن</button>
7</body>
8<script type="text/javascript"> document.getElementById("demoButton").addEventListener("click", () => { multiplyNumbers(15, 27);
9});
10function multiplyNumbers(a, b) { var multipliedValue = a * b;
11document.getElementById("multipliedResult").innerHTML = multipliedValue;
12}
13</script>
14</html>

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

متد addEventListener

هنگامی که کاربر روی دکمه آزمایش کردن کلیک کند، خروجی به صورت تصویر زیر خواهد شد:

addEventListener در جاوا اسکریپت چیست

۴- حباب‌ سازی و ضبط رویداد

«حباب‌سازی» (Event Bubbling) و «ثبت رویداد» (Event Capturing) دو متد انتشار رویداد هستند که ترتیب اجرای کنترل‌کننده‌های رویداد را هنگام وقوع یک رویداد تعیین می‌کنند.

بیایید مثالی را در نظر بگیریم که در آن عنصر div  با ID outerElement  و عنصر P  با ID innerElement  در داخل div قرار دارند. اگر شنونده رویداد کلیک به هر دو عنصر اضافه شود و سپس روی عنصر P داخلی کلیک شود، باید تصمیم گرفت که ابتدا شنونده رویداد والد اجرا شود یا شنونده رویداد فرزند؟ اینجاست که سومین پارامتر اختیاری eventListener به نام "capture" وارد عمل می‌شود.

اگر Capturing روی True تنظیم شود، ابتدا شنونده رویداد والد اجرا می‌شود، به‌عنوان مثال، زمانی که از والد به سمت فرزند پایین می‌رود، رویداد ضبط خواهد شد. از سوی دیگر، اگر Capturing روی False تنظیم شود یا مشخص نشده باشد، ابتدا شنونده رویداد فرزند اجرا می‌شود، یعنی رویداد از کودک به والد منتقل خواهد شد.

 

مثالی از حباب‌ سازی و ثبت رویداد

انتشار رویداد ترتیبی را تعیین می‌کند که عناصر در هنگام وقوع رویدادها را مدیریت می‌کنند. برای مثال، اگر عنصر img  در div وجود داشته باشد و ابتدا عنصر img کلیک شود، کدام رویداد کلیک باید ابتدا مدیریت شود؟

در Bubbling، رویداد ابتدا توسط عنصر پایین‌ترین سطح و سپس توسط عناصر بیرونی مدیریت می‌شود. برای مثال، ابتدا رویداد کلیک روی img و سپس رویداد کلیک در div مدیریت خواهند شد. از سوی دیگر، ضبط یا ثبت رویداد، رویداد را ابتدا در بیرونی‌ترین عنصر و سپس در درونی‌ترین عنصر کنترل می‌کند.

بنابراین، در مورد همان عناصر img و div ، ابتدا رویداد کلیک روی div و سپس رویداد کلیک در img مدیریت می‌شود. متد AddEventListener جاوا اسکریپت به کاربر امکان می‌دهد با استفاده از پارامتر UseCapture مشخص کند که از کدام متد انتشار استفاده کند. مثال زیر که سناریوی بحث شده برای درک این موضوع نشان می‌دهد بسیار مهم است. قطعه کد HTML مثال به صورت زیر است:

1<!DOCTYPE html>
2<html>
3
4<head>
5  <script type="text/javascript" src="scripts.js"></script>
6  <link rel="stylesheet" href="styles.css">
7</head>
8
9<body>
10
11  <p>این مثال تفاوت بین حباب و ضبط کردن هنگام اضافه شدن شنوندگان رویداد را نشان می‌دهد</p>
12
13  <div id="myDiv1">
14    <p id="myP1">اینجا کلیک شود. این حباب است</p>
15  </div><br>
16
17  <div id="myDiv2">
18    <p id="myP2">اینجا کلیک شود. این ضبط کردن است</p>
19  </div>
20
21
22
23</body>
24
25</html>

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

1document.getElementById("myP1").addEventListener("click", function () {
2    alert("You clicked the P element!");
3}, false);
4
5document.getElementById("myDiv1").addEventListener("click", function () {
6    alert("You clicked the DIV element!");
7}, false);
8
9document.getElementById("myP2").addEventListener("click", function () {
10    alert("You clicked the P element!");
11}, true);
12
13document.getElementById("myDiv2").addEventListener("click", function () {
14    alert("You clicked the DIV element!");
15}, true);

قطعه کد Css آن به صورت زیر خواهد بود:

1div {
2 background-color: green;
3 border: 2px dashed;
4 padding: 70px;
5}

خروجی مثال فوق به صورت تصویر زیر خواهد بود:

Event Bubbling وEvent Capturing در جاوا اسکریپت

اضافه کردن Event Handler به شی پنجره

می‌توان از متد AddEventListener در جاوا اسکریپت برای اضافه کردن شنونده‌های رویداد به اشیا DOM مختلف HTML، مانند عناصر HTML، سندی که HTML در آن قرار دارد، «شی پنجره» (Window Object) و هر شی دیگری که رویدادها را پشتیبانی می‌کند (مثلاً xmlHttpRequest) استفاده کرد.

این متد کاربر را قادر می‌سازد تا کنترل‌کننده‌های رویداد را به راحتی به شی Window متصل کند. مثال زیر برای درک این مفهوم است:

1window.addEventListener("resize", () => {
2    document.getElementById("text").innerHTML = Math.random();  
3});

متد RemoveEventListener به چه منظوری استفاده می‌شود؟

متد RemoveEventListener برای حذف کنترل کننده رویداد استفاده می‌شود که قبلاً با استفاده از متد AddEventListener در جاوا اسکریپت به شی HTML DOM متصل شده بود.

این به کاربر امکان می‌دهد شنونده رویداد خاص را از عنصر یا شی حذف کند، بدون اینکه روی هر شنونده دیگری تأثیر بگذارد که ممکن است به آن متصل شده باشد. مثال زیر برای درک این موضوع مهم است. قطعه کد Html مثال به صورت زیر است.

1<!DOCTYPE html>
2<html>
3
4<head>
5  <script type="text/javascript" src="scripts.js"></script>
6  <link rel="stylesheet" href="styles.css">
7</head>
8
9<body>
10
11  <div id="myDIV">این عنصر دارای رویداد ماوس است که هر با حرکت ماوس در فضای سبز یک عدد تصافی را نشان خواهد داد
12    <p dir="rtl">روی دکمه کلیک کنید تا کنترل کننده رویداد DIV حذف شود.</p>
13    <button onclick="removeHandler()" id="myBtn">حذف رویداد</button>
14  </div>
15
16  <p id="demo"></p>
17
18
19
20</body>
21
22</html>

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

1#myDIV {
2    background-color: green;
3    border: 2px dashed;
4    padding: 70px;
5    color: white;
6}

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

1document.getElementById("myDIV").addEventListener("mousemove", myFunction);
2
3function myFunction() {
4    document.getElementById("demo").innerHTML = Math.random();
5}
6
7function removeHandler() {
8    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
9}

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

حذف addEventListener در جاوا اسکریپت

پس از آنکه کاربر روی دکمه حذف رویداد کلیک کرد، دیگر با حرکت دادن ماوس در کادر سبز رنگ عدد تصادفی تولید نخواهد شد و روی آخرین عددی که تولید شده است ثابت باقی خواهد ماند. این مثالی ساده برای درک متد RemoveEventListener در جاوا اسکریپت است.

سخن پایانی

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

بر اساس رای ۱۴ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
EduCbaBitDegree
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *