مетод addEventListener() مستند Document HTML DOM
- صفحه قبلی activeElement
- صفحه بعدی adoptNode()
- به لایه بالاتر بازگردید مستند Documents HTML DOM
تعریف و استفاده
addEventListener() روشی برای اضافه کردن برنامه‌کننده رویداد به سند وجود دارد.
مثال
مثال 1
به سند اضافه کردن رویداد click:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
رابط‌نویسی ساده‌تر:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
مثال 2
می‌توانید شنونده‌های چندگانه رویداد را به مستند اضافه کنید:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
مثال 3
می‌توانید رویدادهای مختلفی را اضافه کنید:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
مثال 4
برای انتقال پارامترها از تابع با استفاده از "توابع ناشناس" تابع با پارامترها فراخوانی کنید:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
مثال 5
تغییر رنگ پس‌زمینه مستند:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
مثال 6
از روش removeEventListener() استفاده کنید:
// اضافه کردن شنونده رویداد
document.addEventListener("mousemove", myFunction);
// حذف شنونده رویداد
document.removeEventListener("mousemove", myFunction);
رابط‌نویسی
document.addEventListener(نوع, تابع, capture)
پارامترها
| پارامترها | توضیح |
|---|---|
| نوع |
ضروری. نام رویداد. از پیشوند "on" استفاده نکنید. از "click" به جای "onclick" استفاده کنید. تمام رویدادهای HTML DOM در اینجا لیست شده‌اند: |
| تابع |
ضروری. تابعی که در وقوع وقایع اجرا می‌شود. وقتی رویداد رخ می‌دهد، گره رویداد به عنوان اولین پارامتر به تابع ارسال می‌شود. نوع رویداد گره‌ای به نوع رویداد مشخص شده بستگی دارد. به عنوان مثال، رویداد "click" به گره MouseEvent تعلق دارد. |
| capture |
اختیاری (پیش‌فرض = false).
|
مقدار بازگشتی
بدون‌نوشتار.
جزئیات فنی
این روش یک تابع شنونده رویداد مشخص شده را به مجموعه شنوندگان فعلی گره اضافه می‌کند تا رویدادهای مشخص شده type را پردازش کند. اگر capture به true، شنونده رویداد به عنوان شنونده رویداد capture ثبت می‌شود. اگر capture به false، به عنوان شنونده رویداد معمولی ثبت می‌شود.
addEventListener() ممکن است چندین بار فراخوانی شود، چندین رویدادگرفتار برای یک نوع رویداد در یک گره ثبت شود. اما باید توجه داشت که DOM نمی‌تواند ترتیب فراخوانی چندین رویدادگرفتار را تعیین کند.
اگر یک تابع شنونده رویداد در همان گره با همان type و capture با استفاده از پارامترها دو بار ثبت شود، ثبت دوم نادیده گرفته می‌شود. اگر در حال پردازش یک رویداد در یک گره هستید و یک شنونده جدید رویداد در همان گره ثبت شود، شنونده جدید رویداد برای آن رویداد فراخوانی نمی‌شود.
وقتی Node.cloneNode() یا Document.importNode() وقتی یک گره Document کپی می‌شود، شنوندگان رویدادهای ثبت‌شده برای گره اصلی کپی نمی‌شوند.
این روش نیز در مستندات Document و Window تعریف شده است و به همان روش کار می‌کند.
پشتیبانی مرورگر
document.addEventListener این یک ویژگی DOM Level 2 (2001) است.
همه مرورگرها این را به طور کامل پشتیبانی می‌کنند:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| پشتیبانی | 9-11 | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
- صفحه قبلی activeElement
- صفحه بعدی adoptNode()
- به لایه بالاتر بازگردید مستند Documents HTML DOM
