HTML DOM EventListener در JavaScript

متد ()addEventListener

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

addEventListener
 document.getElementById("myBtn").addEventListener("click", displayDate); 
مشاهده مثال

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

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

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

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

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

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

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

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

ساختار

element.addEventListener(event, function, useCapture);

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

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

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

Event Handler to an Element
element.addEventListener("click", function(){ alert("Hello World!"); }); 
مشاهده مثال

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

Event Handler to an Element
element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
} 
مشاهده مثال

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

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

Event Handlers to the Same Element
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
مشاهده مثال

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

events of different
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction); 
مشاهده مثال

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

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

Event Handler to the Window Object
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});
مشاهده مثال

گذر پارامترها

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

Passing Parameters
 element.addEventListener("click", function(){ myFunction(p1, p2); }); 
مشاهده مثال

رویداد حباب یا دریافت رویداد؟

دو روش انتشار رویداد در HTML DOM وجود دارد، حباب و گرفتن.

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

اولین رویداد کلیک روی عنصر <p> و سپس رویداد کلیک روی عنصر <div> انجام می شود.

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

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

addEventListener(event, function, useCapture);

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

Event Bubbling or Event Capturing
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
مشاهده مثال

متد ()removeEventListener

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

متد removeEventListener
element.removeEventListener("mousemove", myFunction); 
مشاهده مثال

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

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

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);
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط