روش addEventListener() موضوع HTML DOM

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

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) است.

همه مرورگرها این را به طور کامل پشتیبانی می‌کنند:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی

صفحات مرتبط

روش‌های عنصر:

روش addEventListener()

روش removeEventListener()

روش‌های مستند:

روش addEventListener()

روش removeEventListener()

آموزش:

HTML DOM EventListener

لیست کامل رویدادهای DOM