برنامه‌های نظارتی رویدادهای JavaScript HTML DOM

روش addEventListener()

مثال

افزودن شنونده‌ی رویداد برای وقتی که کاربر روی دکمه کلیک می‌کند:

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

آزمایش کنید

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

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

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

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

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

addEventListener() استفاده می‌کنیم، کنترل بر نحوه‌ی پاسخ به جوش‌زدن رویداد آسان‌تر می‌شود.

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

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

نحوه‌ی نوشتن

element.addEventListener(event, function, useCapture);

پارامتر اول نوع رویداد است (مثلاً "click" یا "mousedown").

پارامتر دوم برنامه‌ای است که هنگام رخ دادن رویداد باید فراخوانی شود.

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

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

افزودن برنامه‌ی پردازش رویداد به عنصر

مثال

هیچگاه به هنگام کلیک بر روی یک عنصر پیام "Hello World!" نشان ندهید:

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

آزمایش کنید

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

مثال

هیچگاه به هنگام کلیک بر روی یک عنصر پیام "Hello World!" نشان ندهید:

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

آزمایش کنید

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

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

مثال

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

آزمایش کنید

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

مثال

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

آزمایش کنید

افزودن برنامه‌ی پردازش رویداد به عنصر Window

addEventListener() به شما اجازه می‌دهد شنونده‌ی رویداد را به هر عنصر HTML DOM مانند عناصر HTML، عنصر HTML، عنصر window یا هر عنصر پشتیبانی‌کننده‌ی رویداد دیگر مانند عنصر XMLHttpRequest اضافه کنید.

مثال

ایجاد شنونده‌ی رویداد برای تغییر اندازه‌ی پنجره:

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

آزمایش کنید

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

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

مثال

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

آزمایش کنید

پخش رویداد یا گیرنده رویداد؟

در HTML DOM دو روش پخش رویداد وجود دارد: پخش به بالا و پخش به پایین.

پخش رویداد یک روش برای تعیین ترتیب عناصر در زمان بروز رویداد است. اگر در عنصر <div> یک <p> باشد و کاربر روی این عنصر <p> کلیک کند، باید ابتدا رویداد "click" کدام عنصر پردازش شود؟

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

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

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

addEventListener(event, function, useCapture);

مقدار پیش‌فرض false، از طریق پخش به بالا استفاده می‌شود، اگر این مقدار تنظیم شود true، رویداد از طریق گیرنده استفاده می‌شود.

مثال

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

آزمایش کنید

با استفاده از روش removeEventListener()

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

مثال

element.removeEventListener("mousemove", myFunction);

آزمایش کنید

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

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

روش
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

توضیح:IE 8، Opera 6.0 و نسخه‌های قدیمی‌تر آن‌ها پشتیبانی نمی‌کنند addEventListener() و removeEventListener() روش. اما، برای این نسخه‌های خاص مرورگر، می‌توانید از attachEvent() مетод به عناصر اضافه کردن برنامه‌های رویداد، و توسط detachEvent() مетод حذف:

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

مثال

راه‌حل‌های بین‌بخشی:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // برای مرورگرهای اصلی، به استثنای نسخه‌های IE 8 و قبل از آن
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // برای نسخه‌های IE 8 و قبل از آن
    x.attachEvent("onclick", myFunction);
}

آزمایش کنید

دستورالعمل عناصر رویداد HTML DOM

برای لیست تمام رویدادهای HTML DOM، لطفاً به منابع کامل ما دستورالعمل عناصر رویداد HTML DOM.