نمایندگی رویداد در جاوا اسکریپت – انجمن DEV

Summarize this content to 400 words in Persian Lang
هیئت رویداد تکنیکی در جاوا اسکریپت است که در آن شما به جای اضافه کردن چندین شنونده رویداد به عناصر فرزند، یک شنونده رویداد را به یک عنصر والد اضافه می کنید. شنونده رویداد در عنصر والد با استفاده از حباب رویداد به رویدادهای مربوط به فرزندان خود گوش می دهد.

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

نحوه کار نمایندگی رویداد

حباب رویداد: هنگامی که رویدادی روی یک عنصر رخ می دهد، از عنصر هدف به عناصر اصلی خود حباب می شود.
هدف‌گذاری رویداد: با استفاده از ویژگی event.target می‌توانید مشخص کنید کدام عنصر فرزند رویداد را راه‌اندازی کرده است.

چرا از نمایندگی رویداد استفاده کنیم؟

عملکرد بهتر (به خصوص برای تعداد زیادی از عناصر).
کد را با کاهش تعداد شنوندگان رویداد ساده می کند.
با عناصر اضافه شده پویا به خوبی کار می کند.

مثال: بدون نمایندگی رویداد

// Add individual event listeners to each button
const buttons = document.querySelectorAll(“.child-button”);
buttons.forEach((button) => {
button.addEventListener(“click”, (event) => {
console.log(`Button ${event.target.textContent} clicked!`);
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اشکال:اگر به صورت پویا یک دکمه جدید اضافه کنید، شنونده رویداد به طور خودکار اعمال نخواهد شد.

مثال: با نمایندگی رویداد

// Add one event listener to the parent element
const parent = document.querySelector(“.parent”);

parent.addEventListener(“click”, (event) => {
if (event.target.classList.contains(“child-button”)) {
console.log(`Button ${event.target.textContent} clicked!`);
}
});

//HTML

Button 1
Button 2
Button 3

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

شنونده رویداد فقط به والد (.parent) اضافه می شود.
هنگامی که هر دکمه ای در داخل والد کلیک می شود، event.target دکمه خاص را شناسایی می کند.
شما از یک شرط (event.target.classList.contains) استفاده می کنید تا مطمئن شوید که کنترل کننده رویداد فقط برای دکمه فرزند اجرا می شود.

مزایای نمایندگی رویداد

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

// Dynamically add a new button
const parent = document.querySelector(“.parent”);
const newButton = document.createElement(“button”);
newButton.className = “child-button”;
newButton.textContent = “Button 4”;
parent.appendChild(newButton);

// No need to add a new event listener manually

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کاهش استفاده از حافظه: به‌جای پیوستن شنوندگان رویداد به عناصر متعدد، یک شنونده منفرد به والدین متصل می‌شود.

خلاصه:تفویض رویداد یک الگوی قدرتمند برای مدیریت موثر رویدادها در بسیاری از عناصر است، به ویژه زمانی که آنها به صورت پویا ایجاد می شوند. از حباب رویداد و event.target برای مدیریت موثر رویدادها استفاده می کند.

// Add individual event listeners to each button
const buttons = document.querySelectorAll(".child-button");
buttons.forEach((button) => {
  button.addEventListener("click", (event) => {
    console.log(`Button ${event.target.textContent} clicked!`);
  });
});

// Add one event listener to the parent element
const parent = document.querySelector(".parent");

parent.addEventListener("click", (event) => {
  if (event.target.classList.contains("child-button")) {
    console.log(`Button ${event.target.textContent} clicked!`);
  }
});

//HTML

  Button 1
  Button 2
  Button 3

// Dynamically add a new button
const parent = document.querySelector(".parent");
const newButton = document.createElement("button");
newButton.className = "child-button";
newButton.textContent = "Button 4";
parent.appendChild(newButton);

// No need to add a new event listener manually