با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در بخش قبلی با به دو روش ساده و عمومی تعریف رویدادهای جاوا اسکریپت پرداختیم علاوه بر آن شما می توانید با استفاده از متد addEventListener در جاوا اسکریپت که یکی از پرکاربردترین متدهای جاوا اسکریپت محسوب می شود، رویدادهای مختلفی نظیر کلیک ماوس، دابل کلیک ماوس و … را به همراه کدهایی جاوا اسکریپتی که باید هنگام رخ دادن آن رویداد اجرا شوند، تعریف کنید. برای آشنایی با چگونگی تعریف متد addEventListener در جاوا اسکریپت در ادامه ی مباحث این بخش با ما همراه باشید.
در این مبحث شما را با سینتکس کلی و روال تعریف متد addEventListener در جاوا اسکریپت و مثال هایی از آن آشنا می کنیم.
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 را به راحتی حذف کنید.
1 | element.addEventListener(event, function, useCapture); |
اولین پارامتر نوع رویداد (مانند “کلیک” یا “mousedown”) است.
پارامتر دوم، تابعي است که مي خواهيم هنگام وقوع رخداد آن را فراخوانی کنيم.
پارامتر سوم یک مقدار boolean است ، که اینکه آیا از رویداد bubbling یا رویداد capturing استفاده شود را مشخص می کند. این پارامتر اختیاری است.
نکته : توجه داشته باشید که در این روش نمی توانید از پیشوند “on” قبل از نام رویداد اضافه کنید، بنابراین به جای “onclick” باید از “click” استفاده کنید.
1 | element.addEventListener("click", function(){ alert("Hello World!"); }); |
شما همچنین می توانید به تابعی که خارج از addEventListener تعریف شده، اشاره کنید:
1 2 3 4 5 | element.addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); } |
با متد ()addEventListener شما می توانید رویدادهای زیادی را بدون رونویسی رویدادهای موجود، به یک عنصر اضافه کنید:
1 2 | element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction); |
همچنین می توانید رویدادهای مختلفی را به یک عنصر HTML نسبت دهید :
1 2 3 | element.addEventListener("mouseover", myFunction); element.addEventListener("click", mySecondFunction); element.addEventListener("mouseout", myThirdFunction); |
متد ()addEventListener به شما امکان می دهد addEventListener را در هر آبجکت HTML DOM مانند عناصر HTML، سند HTML، آبجکت پنجره یا دیگر آبجکت ها که رویدادها را پشتیبانی می کنند مانند شی xmlHttpRequest اضافه کنید.
1 2 3 | window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext; }); |
هنگام ارسال مقادیر پارامترها، از یک تابع ناشناس استفاده کنید که تابع مشخص شده را با پارامترها تماس می دهد:
1 | element.addEventListener("click", function(){ myFunction(p1, p2); }); |
دو متد انتشار رویداد در HTML DOM وجود دارد، bubbling و capturing.
انتشار رویداد یک راه تعریف سفارش عنصر در هنگام رویداد است. اگر عنصر <p> در داخل یک عنصر <div> داشته باشید و کاربر بر روی عنصر <p> کلیک کند، اولین عنصر «کلیک» عنصر باید مورد استفاده قرار گیرد؟
در حال bubbling رویداد در ابتدا درون عنصر و پس از آن خارج می شود: اولین رویداد کلیک روی عنصر <p> و سپس رویداد کلیک روی عنصر <div> انجام می شود.
در گرفتن عنصر رویداد ابتدا عنصر بیرونی و سپس درون آن انجام می شود: اولین رویداد کلیک شده بر روی عنصر <div> و سپس رویداد کلیک روی <p> عنصر کلیک می شود.
با استفاده از متد ()addEventListener می توانید نوع انتشار را با استفاده از پارامتر “useCapture” مشخص کنید:
1 | addEventListener(event, function, useCapture); |
مقدار پیش فرض false است، که از انتشار bubbling استفاده می کند، هنگامی که مقدار به true تنظیم می شود، رویداد از انتشار capturing استفاده می کند.
1 2 | document.getElementById("myP").addEventListener("click", myFunction, true); document.getElementById("myDiv").addEventListener("click", myFunction, true); |
متد ()removeEventListener پردازش رویداد را که با متد ()addEventListener متصل شده است را حذف می کند:
1 | element.removeEventListener("mousemove", myFunction); |
اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از این متد ها پشتیبانی می کند:
Method | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
addEventListener() | ۱٫۰ | ۹٫۰ | ۱٫۰ | ۱٫۰ | ۷٫۰ |
removeEventListener() | ۱٫۰ | ۹٫۰ | ۱٫۰ | ۱٫۰ | ۷٫۰ |
نکته : متدهای ()addEventListener و ()removeEventListener در IE 8 و نسخه های قبلی و Opera 6.0 و نسخه های قبلی پشتیبانی نمی شوند.
با این حال، برای این نسخه های مرورگر خاص، شما می توانید از متد ()attachmentView برای ضمیمه یک متد رویداد به عنصر، و متد ()detachEvent برای حذف آن استفاده کنید:
1 2 | element.attachEvent(event, function); element.detachEvent(event, function); |
1 2 3 4 5 6 | 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 را می دهد.
سپیده
سلام
چرا توابعی که در این هندلر استفاده می کنیم بصورت فعال اجرا نمیشن؟ باید حتما در صفحه کلیک کنم تا آلرت موجود در eventListener را ببینم؟
صادق
سلام. بله حتما باید یک رویدادی رخ بده تا تابع اجرا بشه. منظورتون به صورت فعال چیه؟ اگه به صورت خودکار و پیاپی منظورتونه، از تابع setInterval استفاده کنید.