٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش JavaScript HTML DOM EventListener

روش addEventListener () مثال شنونده رویداد را اضافه کنید که با کلیک کاربر روی دکمه آتش می گیرد: document.getElementById("myBtn").addEventListener("click", displayDate); این addEventListener()روش یک کنترل کننده رویداد را به عنصر مشخص شده متصل می کند. این addEventListener()روش بدون جایگزینی بر گرداننده های رویداد…

محمد یوسفی

29 جولای 2021

روش addEventListener ()

مثال

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

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

این addEventListener()روش یک کنترل کننده رویداد را به عنصر مشخص شده متصل می کند.

این addEventListener()روش بدون جایگزینی بر گرداننده های رویداد موجود ، یک رویداد دهنده را به یک عنصر متصل می کند.

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

می توانید تعداد زیادی کنترل کننده رویداد از همان نوع را به یک عنصر ، یعنی دو رویداد “کلیک” اضافه کنید.

شما می توانید شنوندگان رویداد را به هر شی DOM نه تنها عناصر HTML اضافه کنید. یعنی شی پنجره.

این addEventListener()روش کنترل نحوه واکنش رویداد به حباب را آسان تر می کند.

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

با استفاده از این removeEventListener()روش می توانید شنوندگان رویداد را به راحتی حذف کنید .


نحو

element.addEventListener(event, function, useCapture);

اولین پارامتر نوع رویداد است (مانند ” click” یا ” mousedown” یا هر رویداد HTML DOM دیگر .)

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

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

توجه داشته باشید که از پیشوند “روشن” برای رویداد استفاده نمی کنید. از ” click” به جای ” onclick” استفاده کنید.


یک Event Handler به یک Element اضافه کنید

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

مثال

هشدار “سلام به جهان!” وقتی کاربر روی عنصری کلیک می کند:

همچنین می توانید به یک تابع خارجی “به نام” مراجعه کنید:

مثال

هشدار “سلام به جهان!” وقتی کاربر روی عنصری کلیک می کند:

element.addEventListener("click", myFunction);

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

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

این addEventListener()روش به شما امکان می دهد بسیاری از رویدادها را بدون جایگزینی روی رویدادهای موجود به همان عنصر اضافه کنید:

مثال

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

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

مثال

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

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

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

مثال

شنونده رویداد را اضافه کنید که هنگام تغییر اندازه کاربر پنجره ، آتش می گیرد:

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

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

هنگام عبور مقادیر پارامتر ، از یک “تابع ناشناس” استفاده کنید که تابع مشخص شده را با پارامترها فراخوانی می کند:

مثال

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

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

دو روش انتشار رویداد در HTML DOM وجود دارد ، حباب زدن و گرفتن.

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

در حباب ، رویداد داخلی ترین عنصر ابتدا و سپس قسمت بیرونی رسیدگی می شود: ابتدا رویداد کلیک عنصر <p> و سپس رویداد کلیک عنصر <div> اداره می شود.

در گرفتن اکثر عناصر بیرونی ابتدا رویداد و سپس قسمت داخلی اداره می شود: ابتدا رویداد کلیک عنصر <div> و سپس رویداد کلیک عنصر <p> مدیریت می شود.

با استفاده از روش addEventListener () می توانید نوع انتشار را با استفاده از پارامتر “useCapture” مشخص کنید:

addEventListener(event, function, useCapture);

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

مثال

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

روش removeEventListener ()

این removeEventListener()روش کنترل کننده های رویدادی را که با روش () addEventListener پیوست شده اند حذف می کند:

مثال

element.removeEventListener("mousemove", myFunction);

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها