HTML DOM کا addEventListener() طریقہ

تعریف و استفاده

addEventListener() مفهوم اضافه کردن پروگرام فراخوانی رویداد به عنصر.

مثال

مثال 1

رویداد click به عناصر <button> اضافه کنید:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

اپنا تجربہ کریں

مثال 2

کد کوچک‌تر:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

اپنا تجربہ کریں

مثال‌های بیشتری در پایین صفحه پیدا خواهید کرد.

نحوه‌ی نوشتن

element.addEventListener(type, function, useCapture)

پارامترها

پارامترها توضیح
type

ضروری. نام رویداد.

از پیشوند "on" استفاده نکنید.

از "click" به جای "onclick" استفاده کنید.


DOM کی واقعی فہرست
function ضروری. تابعی که هنگام رخ دادن رویداد اجرا می‌شود.
useCapture

اختیاری (default = false).

  • false - فرآیند در مرحله‌ی پخش فراخوانی می‌شود.
  • true - فرآیند در مرحله‌ی گرفتن فراخوانی می‌شود.

مقدار بازگشتی

بدون.

جزئیات فنی

این روش یک تابع گوش‌دهنده رویداد معین را به مجموعه گوش‌دهنده‌های فعلی گره الحاق می‌کند تا رویدادهای معین type رویدادها. useCapture به true تنظیم شود، گوش‌دهنده به عنوان گوش‌دهنده رویداد捕捉 ثبت می‌شود. اگر useCapture به false تنظیم شود، آن را به عنوان گوش‌دهنده رویداد عادی ثبت می‌کند.

addEventListener() چندین بار فراخوانی شود، می‌توان چندین گوش‌دهنده رویداد برای یک نوع رویداد در یک گره ثبت کرد. اما باید توجه داشت که DOM نمی‌تواند ترتیب فراخوانی چندین گوش‌دهنده رویداد را تعیین کند.

اگر یک تابع گوش‌دهنده رویداد در یک گره با استفاده از type و useCapture اگر دو بار با یک پارامتر ثبت شود، ثبت دوم نادیده گرفته می‌شود. اگر در حال پردازش یک رویداد در یک گره هستید و یک گوش‌دهنده جدید رویداد در آن گره ثبت شود، گوش‌دهنده جدید برای آن رویداد فراخوانی نمی‌شود.

وقتی با Node.cloneNode() روش یا Document.importNode() وقتی یک گره Document را کپی می‌کند، گوش‌دهنده‌های رویدادهایی که برای گره اصلی ثبت شده‌اند، کپی نمی‌شوند.

این روش نیز در Document و Window بر روی شیء تعریف شده‌اند و به همان روش کار می‌کنند.

مثال‌های بیشتری

مثال 3

آپ می‌توانید بسیاری از رویدادها را به یک عنصر اضافه کنید:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

اپنا تجربہ کریں

مثال 4

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

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

اپنا تجربہ کریں

مثال 5

اگر پارامتر کی قیمتیں پرسنل کرنا چاہئیں تو ‘‘منام فنکشن’’ استعمال کریں:

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

اپنا تجربہ کریں

مثال 6

تبدیل <button> عنصر کی پس منظر رنگ:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

اپنا تجربہ کریں

مثال 7

بولبول اور کیچ کی فرق:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

اپنا تجربہ کریں

مثال 8

ایونٹ ہینڈلر کو حذف کریں:

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

اپنا تجربہ کریں

برووزر کی پشتیبانی

element.addEventListener() یہ DOM Level 2 (2001) کا مخصوص ہے۔

تمام برووزر اس کو پورا پورا سپورٹ کرتے ہیں:

کروم آئی ای ایج فائرفاکس سافری آپریا
کروم آئی ای ایج فائرفاکس سافری آپریا
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی

متعلقہ صفحات

عنصر کی طریق:

addEventListener() طریق

removeEventListener() طریق

دستاویز کی طریق:

addEventListener() طریق

removeEventListener() طریق

تعلیم:

HTML DOM EventListener

DOM کی واقعی فہرست