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

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

در این آموزش ، همه چیز درباره JavaScript addEventListener را می خوانید. شما نحو مناسب و همه روش های استفاده از این عملکرد را خواهید آموخت. همچنین می فهمید که چگونه می توان این قابلیت را در کد شما اضافه کرد. این آموزش همچنین شامل حباب و گرفتن رویداد است که از مفاهیم مهمی است که باید درک شود.

نکات اصلی کنترل رویدادها در جاوااسکریپت:

• جاوا اسکریپت کنترل کننده های رویداد را فراهم می کند که به شما امکان می دهد کد را تنظیم کنید تا به برخی از عناصر HTML واکنش نشان دهد.
• گردانندگان JavaScript برای رویدادهای HTML DOM می توانند نه تنها از عناصر HTML بلکه از هر شی object DOM دیگری نیز استفاده کنند.
• روش EventTarget به حروف کوچک و بزرگ حساس است ، بنابراین همیشه باید از حروف بزرگ استفاده کنید.

شرح و نحو

برای اتصال یک کنترل کننده رویداد JavaScript به یک عنصر خاص ، شما باید از روشJavaScript addEventListener استفاده کنید.

این روش به طور خاص برای پیوستن یک کنترل کننده رویداد به یک عنصر مشخص به گونه ای استفاده می شود که دیگر کنترل کننده های رویداد موجود را رونویسی نکند. چندین کنترل کننده رویداد ممکن است برای یک عنصر استفاده شود (به عنوان مثال ، ممکن است دو رویداد کلیک به همان عنصر اختصاص یابد).

به هر شی DOM ممکن است یک کنترل کننده رویداد JavaScript اختصاص داده شود ، که نه تنها عناصر HTML را شامل می شود ، بلکه به عنوان مثال خود پنجره را نیز شامل می شود.

روش JavaScript addEventListener همچنین می تواند کنترل نحوه عکس العمل یک رویداد در برابر حباب را آسان کند.

جاوا اسکریپت هنگام استفاده از جاوا اسکریپت addEventListener برای بهبود خوانایی ، از نشانه گذاری HTML جدا شده و حتی اجازه می دهد شنوندگان رویداد را بدون کنترل نشانه گذاری HTML اضافه کنید. با استفاده از روش removeEventListener ، کنترل کننده های رویداد به راحتی حذف می شوند:

document.getElementById("button").addEventListener("click", displayDate);

نحو

بیایید اکنون قوانین نحو اعمال شده را بررسی کنیم و اطمینان حاصل کنیم که پارامترهای مورد نیاز را درک می کنیم:

element.addEventListener (رویداد ، عملکردName ، useCapture) ؛

اکنون مرحله به مرحله آن را برای شما توضیح خواهیم داد:

پارامتر اول نوع رویداد را مشخص می کند (به عنوان مثال “کلیک” یا “mousedown”).

پارامتر دوم عملکردی را فراخوانی و اجرا می کند که هنگام وقوع رویداد فراخوانی شود.

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

توجه: برخلاف تنظیم كننده های رویداد از طریق ویژگی های HTML مانند onclick، ​​در اینجا نیازی به پیشوند روشن نیست. تمام آنچه برای نوشتن نیاز دارید کلیک کردن است ، برای تعیین نوع رویداد انجام شده مورد نیاز است.

افزودن کنترل کننده های رویداد

JavaScript addEventListener فرصت های مختلفی را برای شما فراهم می کند که اکنون یکی یکی بررسی می کنیم. اول ، ما یاد خواهیم گرفت که به سادگی یک کنترل کننده رویداد را به یک عنصر اضافه کنیم. سپس ، سعی خواهیم کرد که همزمان بیش از یک مورد اضافه کنیم.

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

افزودن یک رویداد دهنده به یک عنصر

وقتی شنونده رویداد JavaScript را اضافه می کنید ، عملکردی که باید روی یک رویداد اجرا شود می تواند ناشناس باشد یا نامگذاری شود. در مثال زیر ، تابع ناشناس مورد استفاده را مشاهده می کنید. در این حالت ، باید کد را در عملکرد تعریف کنید:

a.addEventListener("click", () => {
  alert("You clicked?"); 
});

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

a.addEventListener("click", clickFunction);
function clickFunction() {
    alert ("So that's what happens when you click.");
}

بسیاری از کنترل کننده های رویداد را به همان عنصر اضافه کنید

متد JavaScript addEventListener به شما امکان می دهد چندین کنترل کننده رویداد را به یک عنصر واحد اضافه کنید ، در حالی که هیچ یک از دستیارهای رویدادی را که قبلاً تخصیص داده شده جایگزین نکرده است. نگاهی به مثال زیر بیندازید:

a.addEventListener("click", firstFunction);
a.addEventListener("click", secondFunction);

انواع مختلف رویداد نیز ممکن است مشخص شوند:

a.addEventListener("mouseover", mouseOverFunction);
a.addEventListener("click", clickFunction);
a.addEventListener("mouseout", mouseOutFunction);

یک Event Handler به شیow Window اضافه کنید

روش JavaScript addEventListener به شما امکان می دهد شنوندگان رویداد را به اشیا HTML HTML DOM ، مانند عناصر HTML ، سندی که HTML در آن وجود دارد ، شی پنجره و هر شی object دیگری که از رویدادها پشتیبانی می کند ، اضافه کنید (مانند شی xmlHttpRequest).

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

عبور از پارامترها

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

a.addEventListener("click", () => { 
  clickFunction(param1, param2); 
});

حباب رویداد یا گرفتن رویداد؟

گرفتن و ایجاد حباب دو روش تبلیغ رویدادهای HTML DOM است.

انتشار رویداد ترتیب عنصر را هنگام وقوع یک رویداد تعریف می کند. به عنوان مثال ، هنگامی که شما یک عنصر <img> در یک <div> داشته باشید ، و بر روی عنصر <img> کلیک شود ، کدام یک از رویدادهای کلیک ابتدا باید مدیریت شوند؟

در مورد حباب ، ابتدا عنصری را که در پایین ترین سطح قرار دارد و سپس عناصر خارجی را کنترل می کنیم. به عنوان مثال ، رویداد کلیک بر روی <img> و رویداد کلیک بر روی <div> بعد از آن.

این دستور در صورت ضبط رویداد کلیک بر روی <div> و سپس رویداد کلیک در <img> برعکس می شود.

هنگام استفاده از روش JavaScript addEventListener می توانید تعیین کنید که کدام روش انتشار با پارامتر useCapture استفاده شود.

به طور پیش فرض ، این پارامتر روی false تنظیم شده است ، به این معنی که از حباب استفاده می شود و فقط در صورت استفاده دستی از این مقدار ، از ضبط استفاده می شود.

document.getElementById("pElement").addEventListener("click", clickFunction, true);  
document.getElementById("divElement").addEventListener("click", clickFunction, true);

روش removeEventListener

این روش کنترل کننده های رویدادی را که قبلاً با استفاده از روش JavaScript addEventListener پیوست شده بودند حذف خواهد کرد:

a.removeEventListener("mousemove", mouseMoveFunction);

خلاصه کنترل رویدادها در جاوااسکریپت:

• شنوندگان رویداد جاوا اسکریپت ساده است ، اما به یک نحو مناسب نیاز دارد.
• شما می توانید چندین شنونده رویداد را به همان عنصر اضافه کنید.
• می توانید مشخص کنید که آیا می خواهید حباب یا ضبط رویداد اجرا شود.
• با روش removeEventListener می توانید شنوندگان رویداد را به راحتی حذف کنید.