متد element.addEventListener

مثال (متد element.addEventListener)

نسبت دادن یک رویداد کلیک به یک عنصر <button>. هنگامی که کاربر بر روی دکمه ی مورد نظر کلیک می کند، عبارت

"Hello World" در یک عنصر <p> با "id="demo در خروجی نمایش داده خواهد شد:

document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

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

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

نکته: می توانید از متد document.addEventListener() برای نسبت دادن یک شنونده ی رویداد به سند استفاده کنید.

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

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این متد پشتیبانی می کند.

متد
addEventListener()	1.0	9.0	1.0	1.0	7.0

نکته: متد ()addEventListener، در اینترنت اکسپلورر8 و ورژن های قبلی آن پشتیبانی نمی شود. و همچنین در اپرا 0.7 و ورژن های قبلی آن. برای این ورژن های خاص از مرورگرها، شما می توانید از متد ()attachEvent برای ایجاد شنونده های رویداد استفاده کنید.

نحوه استفاده

element.addEventListener(event, function, useCapture)

مقادیر پارامترها

پارامتر	توضیحات
event	ضروری. یک رشته که مشخص کننده ی نام رویداد است. نکته: از پیشوند "on" استفاده نکنید. بعنوان مثال از عبارت "click" به جای "onclick" استفاده کنید. برای یافتن یک لیست از تمام رویداد های HTML DOM می توانید HTML DOM مرجع کلیه رویدادهای JavaScript Reference را ببینید.
function	ضروری. تابعی که می خواهیم به هنگام روی دادن رویداد، اجرا شود را مشخص می کند. هنگامی که یک رویداد روی می دهد، یک شیء رویداد بعنوان اولین پارامتر، به تابع ارسال می شود. نوع شیء رویداد بستگی به رویداد مشخص شده دارد. بعنوان مثال رویداد click به شیء MouseEvent تعلق دارد.
useCapture	اختیاری. یک مقدار بولی که مشخص می کند که آیا رویداد باید در فاز capturing اجرا شود یا در فاز bubbling. مقادیر امکان پذیر: true : شنونده ی رویداد در فاز capturing اجرا شده است. false: پیش فرض. شنونده ی رویداد در فاز bubbling اجرا شده است.

پارامتر

توضیحات

event

ضروری. یک رشته که مشخص کننده ی نام رویداد است.

نکته: از پیشوند "on" استفاده نکنید. بعنوان مثال از عبارت "click" به جای "onclick" استفاده کنید.
برای یافتن یک لیست از تمام رویداد های HTML DOM می توانید HTML DOM مرجع کلیه رویدادهای JavaScript Reference را ببینید.

function

ضروری. تابعی که می خواهیم به هنگام روی دادن رویداد، اجرا شود را مشخص می کند.

هنگامی که یک رویداد روی می دهد، یک شیء رویداد بعنوان اولین پارامتر، به تابع ارسال می شود. نوع شیء رویداد بستگی به رویداد مشخص شده دارد. بعنوان مثال رویداد click به شیء MouseEvent تعلق دارد.

useCapture

اختیاری. یک مقدار بولی که مشخص می کند که آیا رویداد باید در فاز capturing اجرا شود یا در فاز bubbling.

مقادیر امکان پذیر:

true : شنونده ی رویداد در فاز capturing اجرا شده است.
false: پیش فرض. شنونده ی رویداد در فاز bubbling اجرا شده است.

جزئیات تکنیکی

DOM Version:	DOM Level 2 Events
مقدار برگشتی	No return value
Changelog:	پارامتر useCapture در فایرفاکس 6 و اپرا 11.60 به صورت اختیاری در امده است. (همواره در مرورگرهای کروم و اینترنت اکسپلورر و سافاری به صورت پیش فرض بوده است).

مثال - خودتان امتحان کنید

مثال (متد element.addEventListener)

شما همچنین می توانید به یک تابع خارجی و دارای نام ارجاع دهید.

این مثال نشان می دهد که چطور یک تابع را هنگامی که کاربر بر روی یک عنصر <button> کلیک می کند، اجرا کنیم:

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

function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}

خودتان امتحان کنید »

مثال (متد element.addEventListener)

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

این مثال نشان می دهد که چطور دو رویداد کلیک را به عنصر <button> اضافه کنیم:

document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);

خودتان امتحان کنید »

مثال (متد element.addEventListener)

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

این مثال نشان می دهد که به چه صورت رویدادهای زیادی را به یک عنصر <button> اضافه کنیم:

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

خودتان امتحان کنید »

مثال (متد element.addEventListener)

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

document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});

خودتان امتحان کنید »

مثال (متد element.addEventListener)

تغییر دادن رنگ پس زمینه ی یک عنصر <button>:

document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
});

خودتان امتحان کنید »

مثال (متد element.addEventListener)

استفاده از پارامتر اختیاری useCapture برای نشان دادن تفاوت بین bubbling و capturing:

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

خودتان امتحان کنید »

مثال (متد element.addEventListener)

استفاده از متد، ()removeEventListener برای حذف کردن یک شنونده ی رویداد که توسط متد ()addEventListener ایجاد شده است:

// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

خودتان امتحان کنید »

مثال (متد element.addEventListener)

برای مرورگرهایی که از متد ()addEventListener پشتیبانی نمی کنند، شما می توانید از متد ()attachEvent استفاده کنید.

این مثال یک راه حل مرورگری را نشان می دهد:

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

خودتان امتحان کنید »