‎‎رويداد گوش بزنگJavaScript HTML DOM EventListener -‎

‎‎متدaddEventListener( )‎

‎‎مثال ـ رويداد گوش بزنگ به دكمه اي اضافه ميشود كه در هنگام كليك فعال شود.

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

‎متد‎‎addListener( )‎‎ يك رويداد كنترل كننده را به عنصر مشخص شده ‎متصل ميكند.

‎متد‎‎addListner( )‎‎ ،يك كنترل كننده رويدادي را بيك عنصر متصل ميكند ‎بدون اينكه كنترل كننده هاي موجود را بازنويسي كند .ميتوان چندين كنترل كننده رويدادي نوع ‎مشابه مثل كليك بيك عنصر متصل نمود.

‎ميتوان رويداد گوش بزنگ را به هرشئDOM ازجمله شئ پنجره اضافه كرد . يعني فقط مخصوص عناصر HTML‎نمي باشد .

‎هنگام استفاده از‎‎addEventListener( )‎‎ براي خوانائي بهتر جاوااسكريپت ‎خودش را از نشانه گذاريHTML جدا ميكند، و اين امكان را ميدهد كه بتوان رويدادي گوش بزنگ به ‎آن اضافه نمود، مخصوصا مواردي كه در نشانه گذاريHTML در نظر گرفته نشده است .

‎رويدادهاي اضافه شده را بسادگي با متد‎‎removeEventListener( )‎‎ ‎ميتوان حذف نمود.

‎‎فرم كلي اضافه كردن رويداد:

‎element.addEventListener(event,function,useCapture);

‎اولين پارامتر نوع رويداد را مشخص ميكند، مثل‎‎"click‎"‎, ‎"mousedown‎"‎ يا هر ‎رويداد ديگري ازHTML DOM

‎‎.‎دومين پارامتر تابعي است كه ميخواهيم هنگام رويداد فراخوان شود.

‎سومين پارامتر يك مقدار بولين است، كه مشخص ميكند كه ازحباب رويداد يا ثبت آن استفاده شود. ‎اين پارامتراختياريست.

‎Add an Event Handle to an Element‎

‎‎افزودن يك كنترل رويداد به يك عنصر

‎‎مثال ـ هنگاميكه عنصر كليك ميشود پيغام‎"Hello World!‎"‎ظاهر ميشود .

element.addEventListener("click", function(){ alert("Hello World!"); });

‎‎همچنين ميتوان بنام يك تابع خارجي ارجاع كرد.

‎‎مثال ـ استفاده از نام تابعmyfunction

element.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

‎Add Many Event Handlers to the Same Element‎

‎‎افزودن چند كنترل رويداد بيك عنصر

‎متد‎‎addEventListener( )‎‎ اين امكان را ميدهد كه بتوان چندين كنترل ‎رويداد بيك عنصر اضافه كرد، بدون اينكه رونويسي شوند.

‎‎مثال ـ افزودن دو كنترل رويداد بيك عنصر

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

‎‎ميتوان رويدادهاي نوع مختلف بيك عنصر اضافه كرد، مثل‎‎"click‎"‎,‎"mouseover‎"‎

‎‎مثال ـ افزودن چند نوع رويداد بيك عنصر

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

‎Add an Event Handler to the window Object‎

‎‎افزودن يك كنترل رويدا به شئ ويندو

‎متد‎‎addEventListener( ) ‎‎ اين امكان را ميدهد كه بتوانيد كنترل ‎رويدادي را به هرشئHTML DOM اضافه نمائيد، مثال عناصروسندHTML و شئ پنجره، يا ساير ‎شئ هائيكه از رويدادها پشتيباني مي نمايند مثل شئ‎xmlHttpequst‎

‎‎مثال ـ يك رويداد گوش بزنگ جهت تغيير اندازه پنجره براي كاربر

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

‎‎ارسال پارامترهاPassing Parameters -‎

‎هنگام ارسال مقادير پارامترهااز يك تابع ناشناس‎(anonymous function) استفاده ‎كنيد، كه تابع مشخص شده با پارامترهافراخواني شود.

‎‎مثال ـ ارسال پارامتر در رويداد گوش بزنگ

element.addEventListener("click", function(){ myFunction(p1, p2); });

‎‎رويداد حبابي يا رويداد ثبتيEvent Bubbling or Event Capuring -‎

‎‎دو راه براي انتشار رويداد درHTML DOM وجود دارد، حبابي يا ثبتي .

‎انتشار رويداد راهي براي تعريف ترتبب اثر رويداد هنگام وقوع براي عناصرمرتب است .اگر يك عنصر ‎<p>‎‎درداخل عنصر ‎<div>‎ باشد، وكاربر روي عنصر <p> ‎كليك كند، كدام عنصر ابتدا بايد مديريت شود.

‎در روش حبابي ابتدا عنصر داخلي وسپس به ترتيب داخل به بيرون مديريت ميشود .يعني ابتدا عنصرp ‎وبعد عنصرdiv

‎در روش ثبتي ابتدا عنصر بيروني وسپس دورني مديريت ميشوند ، يعني اول عنصرdiv وسپس عنصر p ‎مديريت رويدادي ميشوند.

‎با متد‎addEventListener( )‎ ميتوان نوع انتشار را با پارامتر‎"useCapture‎"‎ مشخص ‎كرد .مطابق فرمت رير:

‎addEventListener(event , function, ‎useCapture‎);‎

‎مقدار پيش فرض آن‎false‎ است، كه بمعني انتشار حبابي است .درصورتيكه مقدار آن ‎true‎‎تنظيم شود، انتشار ثبتي خواهد بود .

‎‎مثال ـ افزايش رويداد با پارامتر انتشار

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

‎‎متد حذف رويدادگوش بزنگremoveEventListener( ) -‎

‎متد‎‎removeEventListener( )‎‎ براي حذف كنترل رويدادي مورد استفاده ‎قرار ميگيرد.يعني آنهائي كه با‎addEventListener( )‎ ايجاد شدند ميتوان حذف نمود .

‎‎مثال ـ حذف كنترل رويدادي گوش بزنگ

element.removeEventListener("mousemove", myFunction);

JS Tutorial آموزش جاوااسکریپت

JS Objects اشیاء جاوااسکریپت

JS Functions توابع جاوااسکریپت

JS Classes کلاسهای جاوااسکریپت

JS Async ناهمزمانی جاوااسکریپت

JS HTML DOM شئ دام

JS Browser BOM شئ مرورگر

JS Web APIs رابط های اپی آی وب

JS AJAX آجکس وجاوااسکریپت

JavaScript JSON

JavaScript vs JQuery

JS Graphics گرافیک جاوااسکریپت

JS References فهرست مطالب