۲۴
آبان

جلسه ۷۹ : متد addEventListener در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در بخش قبلی با به دو روش ساده و عمومی تعریف رویدادهای جاوا اسکریپت پرداختیم علاوه بر آن شما می توانید با استفاده از متد addEventListener در جاوا اسکریپت که یکی از پرکاربردترین متدهای جاوا اسکریپت محسوب می شود، رویدادهای مختلفی نظیر کلیک ماوس، دابل کلیک ماوس و … را به همراه کدهایی جاوا اسکریپتی که باید هنگام رخ دادن آن رویداد اجرا شوند، تعریف کنید. برای آشنایی با چگونگی تعریف متد addEventListener در جاوا اسکریپت در ادامه ی مباحث این بخش با ما همراه باشید.

متد addEventListener در جاوا اسکریپت

در این مبحث شما را با سینتکس کلی و روال تعریف متد addEventListener در جاوا اسکریپت و مثال هایی از آن آشنا می کنیم.

مثال : نمونه کد متد addeventlistener

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

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

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

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

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

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

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

شما می توانید add event listeners را به هر آبجکت DOM نیز اضافه کنید. (به عنوان مثال آبجکت پنجره).

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

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

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

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

سینتکس تعریف متد addEventListener در جاوا اسکریپت

مثال :

element.addEventListener(event, function, useCapture);

1	element.addEventListener(event, function, useCapture);

اولین پارامتر نوع رویداد (مانند “کلیک” یا “mousedown”) است.

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

پارامتر سوم یک مقدار boolean است ، که اینکه آیا از رویداد bubbling یا رویداد capturing استفاده شود را مشخص می کند. این پارامتر اختیاری است.

نکته : توجه داشته باشید که در این روش نمی توانید از پیشوند “on” قبل از نام رویداد اضافه کنید، بنابراین به جای “onclick” باید از “click” استفاده کنید.

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

مثال : هنگامی که کاربر روی عنصر کلیک می کند پیغام

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

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

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

شما همچنین می توانید به تابعی که خارج از addEventListener تعریف شده، اشاره کنید:

مثال : اشاره به تابع خارج از addeventlistener

element.addEventListener("click", myFunction);

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

element.addEventListener("click", myFunction);

function myFunction() {

alert ("Hello World!");

}

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

افزودن چندین رویداد به یک عنصر HTML

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

مثال : اعمال چندین رویداد به یک عنصر HTML

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

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

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

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

مثال : انتساب چندین رویداد به یک عنصر HTML

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

element.addEventListener("mouseover", myFunction);

element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseout", myThirdFunction);

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

افزودن رویداد به آبجکت ویندوز

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

مثال : رویداد تغییر اندازه ی پنجره

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

window.addEventListener("resize", function(){

document.getElementById("demo").innerHTML = sometext;

});

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

ارسال پارامترها

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

مثال : ارسال پارامتر

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

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

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

رویداد bubbling و capturing

دو متد انتشار رویداد در HTML DOM وجود دارد، bubbling و capturing.

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

در حال bubbling رویداد در ابتدا درون عنصر و پس از آن خارج می شود: اولین رویداد کلیک روی عنصر <p> و سپس رویداد کلیک روی عنصر <div> انجام می شود.

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

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

مثال :

addEventListener(event, function, useCapture);

1	addEventListener(event, function, useCapture);

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

مثال : رویداد capture

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

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

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

متد ()removeEventListener

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

مثال : حذف addeventlistener

element.removeEventListener("mousemove", myFunction);

1	element.removeEventListener("mousemove", myFunction);

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

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

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

Method	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
addEventListener()	۱٫۰	۹٫۰	۱٫۰	۱٫۰	۷٫۰
removeEventListener()	۱٫۰	۹٫۰	۱٫۰	۱٫۰	۷٫۰

نکته : متدهای ()addEventListener و ()removeEventListener در IE 8 و نسخه های قبلی و Opera 6.0 و نسخه های قبلی پشتیبانی نمی شوند.

با این حال، برای این نسخه های مرورگر خاص، شما می توانید از متد ()attachmentView برای ضمیمه یک متد رویداد به عنصر، و متد ()detachEvent برای حذف آن استفاده کنید:

مثال :

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

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

مثال : مثال رویدادهای فوق

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

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

}

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

کلام آخر

در این بخش شما را با یکی از روش های متفاوت و پر کاربرد تعریف رویدادهای html با استفاده از جاوا اسکریپت آشنا کردیم. متد addEventListener در جاوا اسکریپت به شما اجازه تعریف رویدادهای چندگانه برای یک عنصر html را می دهد.

به اشتراک بگذارید

متد addEventListener در جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 2

سپیده
تیر ۳, ۱۴۰۰
سلام
چرا توابعی که در این هندلر استفاده می کنیم بصورت فعال اجرا نمیشن؟ باید حتما در صفحه کلیک کنم تا آلرت موجود در eventListener را ببینم؟
پاسخ دادن
- صادق
  تیر ۳, ۱۴۰۰
  سلام. بله حتما باید یک رویدادی رخ بده تا تابع اجرا بشه. منظورتون به صورت فعال چیه؟ اگه به صورت خودکار و پیاپی منظورتونه، از تابع setInterval استفاده کنید.
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۷۹ : متد addEventListener در جاوا اسکریپت

مقدمه

متد addEventListener در جاوا اسکریپت

سینتکس تعریف متد addEventListener در جاوا اسکریپت

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

افزودن چندین رویداد به یک عنصر HTML

افزودن رویداد به آبجکت ویندوز

ارسال پارامترها

رویداد bubbling و capturing

متد ()removeEventListener

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

کلام آخر

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ