شنونده رویداد در HTML DOM

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


متد addEventListener()

مثال

یک شنونده رویداد (Event listener) را برای زمانی که کاربر روی یک دکمه کلیک می‌کند اضافه می‌کند:[۱]

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


مشاهدهٔ نتیجه


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

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

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

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

شما می‌توانید مدیریت کننده رویدادها را نه‌تنها برای عناصر HTML بلکه برای هر شیء DOM اضافه کنید.

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

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

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

شیوه نوشتار

element.addEventListener(event, function, useCapture);

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

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

پارامتر سوم یک مقدار منطقی (boolean) است که مشخص می‌کند که از کدامیک از روش‌های event bubbilng یا از event capturing استفاده شود. این پارامتر اختیاری است.

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

اضافه کردن یک مدیریت کننده رویداد (Event Handler) به یک عنصر

مثال

پیغام "Hello World" را زمانی که کاربر روی یک عنصر کلیک می‌کند را به صورت یک هشدار (alert) نمایش می‌دهد.

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


مشاهدهٔ نتیجه


شما همچنین می‌توانید به یک تابع “نامگذاری ”شدهٔ خارجی اشاره کنید:

مثال

پیغام "Hello World" را زمانی که کاربر روی یک عنصر کلیک می‌کند را به صورت یک هشدار (alert) نمایش می‌دهد.

1element.addEventListener("click", myFunction);
2
3function myFunction() {
4  alert ("Hello World!");
5}


مشاهدهٔ نتیجه


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

متد addEventListener() به شما اجازه می‌دهد که چندین رویداد را به یک عنصر مشترک بدون بازنویسی یا تغییر رویداد موجود، اضافه کنید:

مثال

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


مشاهدهٔ نتیجه


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

مثال

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


مشاهدهٔ نتیجه


اضافه کردن یک مدیریت کننده رویداد به شیء پنجره (window Object)

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

مثال

اضافه کردن یک شنونده رویداد برای زمانی که کاربر پنجره را resize (به فارسی: اندازه صفحه را تغییر دادن) کند اضافه شده‌است:

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


مشاهدهٔ نتیجه


پاس دادن پارامترها

زمانی که مقدار پارامترها را پاس می‌دهید، از یک تابع بدون نام ("anonymous function") که یک تابع به خصوص را با پارامترها فراخوانی می‌کند، استفاده کنید:

مثال

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


مشاهدهٔ نتیجه


Event Bubbling یا Event Capturing

دو روش برای گسترش رویداد در HTML DOM وجود دارد:

  • bubbling
  • capturing

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

در bubbling رویداد درونی‌ترین عنصر ابتدا مدیریت می‌شود و سپس رویداد سایر کنترل‌های بیرون کنترل می‌شود. رویداد کلیک عنصر <p> ابتدا اجرا می‌گردد و سپس رویداد کلیک عنصر <div> اجرا می‌شود.

در Capturing رویداد بیرونی‌ترین عنصر ابتدا اجرا می‌گردد و سپس رویداد عناصر داخلی مدیریت می‌شود: رویداد کلیک عنصر <div> ابتدا مدیریت می‌شود و سپس رویداد کلیک عنصر <p> مدیریت می‌شود.

با استفاده از متد addEventListener()ما می‌توانیم نوع مدیریت رویداد را با استفاده از پارامتر "usecapture" تعیین کنیم:

addEventListener(event, function, useCapture);

مقدار پیشفرض برابر با مقدار false است که موجب استفاده از روش bubbling می‌شود، زمانی که این پارامتر مقدار true داشته باشد، مدیریت رویدادها به روش capturing صورت می‌گیرد.

مثال

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


مشاهدهٔ نتیجه


متد removeEventListener()

متد removeEventListener() مدیریت رویداد کننده‌هایی که به وسیلهٔ متد addEventListener() به کنترل متصل شده‌است را پاک می‌کند:

مثال

element.removeEventListener("mousemove", myFunction);


مشاهدهٔ نتیجه


سازگاری با مرورگرها

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

متد Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
addEventListener()
۱٫۰ ۹٫۰ ۱٫۰ ۱٫۰ ۷٫۰
removeEventListener()
۱٫۰ ۹٫۰ ۱٫۰ ۱٫۰ ۷٫۰


نکته: متد های addEventListener() و removeEventListener() در نسخه ۸ از مرورگر IE و نسخه‌های قدیمی‌تر پشتیبانی نمی‌شود. اما برای مرورگرها با این نسخه بخصوص، شما می‌توانید از متد attachEvent() برای اتصال یک مدیریت کننده رویداد برای یک عنصر و از متد detachEvent() برای حذف آن استفاده کنید:

element.attachEvent(event, function);
element.detachEvent(event, function);

راه حل سازگاری با تمام مرورگرها:

مثال

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


مشاهدهٔ نتیجه


مرجع شیء رویداد در HTML DOM (HTML DOM Event Object)

برای مشاهده لیست کاملی از رویدادهای HTML DOM درجاوا اسکریپت، به مقاله کامل ما تحت عنوان مرجع شیء HTML DOM در جاوا اسکریپت نگاهی بیندازید.

تمرینات جاوا اسکریپت

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی