متد ()addEventListener

یک EventListener را اضافه کنید که وقتی یک کاربر روی یک دکمه کلیک میکند:

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

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

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

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

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

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

هنگام استفاده از روش ()addEventListener ، جاوا اسکریپت از نشانه گذاری HTML جدا می شود،

برای خوانایی بهتر به شما اجازه می دهد برای اضافه کردن EventListener حتی زمانی که نشانه گذاری HTML را کنترل نکنید.

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

ساختار

اولین پارامتر نوع رویداد (مانند "کلیک" یا "mousedown") است.
پارامتر دوم، تابعي است که ميخواهيم هنگام وقوع رخداد تماس بگيريم.
پارامتر سوم یک مقدار بولی است که مشخص کردن اینکه آیا از رویداد استفاده شود. این پارامتر اختیاری است.

توجه داشته باشید که از پیشوند "on" برای رویداد استفاده نمی کنید. از "کلیک" به جای "onclick" استفاده کنید.

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

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); 

یک شیء رویداد را به شیء Window اضافه کنید

روش ()addEventListener به شما امکان میدهد EventListener را در هر شیء HTML DOM مانند عناصر HTML، سند HTML، شیء Window  یا دیگر اشیاء که رویدادها را پشتیبانی میکنند مانند شی 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" مشخص کنید:

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

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

متد ()removeEventListener

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

element.removeEventListener("mousemove", myFunction); 

پشتیبانی مرورگر

توجه: روش های ()addEventListener و ()removeEventListener در IE 8 و نسخه های قبلی و Opera 6.0 و نسخه های قبلی پشتیبانی نمی شوند. با این حال، برای این نسخه های مرورگر خاص، شما می توانید از روش ()attachmentView برای ضمیمه یک متد رویداد به عنصر، و روش ()detachEvent برای حذف آن استفاده کنید.

راه حل متقابل مرورگر:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}