Warning: preg_grep(): Compilation failed: quantifier does not follow a repeatable item at offset 27 in /var/www/tg-me/post.php on line 75
Frontend | Вопросы собесов | Telegram Webview: easy_javascript_ru/1168 -
Telegram Group & Telegram Channel
🤔 Что такое делегирование?

Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.

🚩Как работает делегирование?

Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую
document.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});


Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.

🟠Делегирование событий (оптимальный способ)
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log("Кнопка нажата:", event.target.textContent);
}
});


🟠Пример с динамическими элементами
Если мы добавляем кнопки динамически, обработчик все равно будет работать
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.classList.contains("btn")) {
console.log("Нажата кнопка:", event.target.textContent);
}
});

// Добавляем новую кнопку динамически
setTimeout(() => {
const newButton = document.createElement("button");
newButton.classList.add("btn");
newButton.textContent = "Новая кнопка";
document.getElementById("container").appendChild(newButton);
}, 2000);


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍262



tg-me.com/easy_javascript_ru/1168
Create:
Last Update:

🤔 Что такое делегирование?

Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.

🚩Как работает делегирование?

Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую

document.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});


Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.

🟠Делегирование событий (оптимальный способ)
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log("Кнопка нажата:", event.target.textContent);
}
});


🟠Пример с динамическими элементами
Если мы добавляем кнопки динамически, обработчик все равно будет работать
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.classList.contains("btn")) {
console.log("Нажата кнопка:", event.target.textContent);
}
});

// Добавляем новую кнопку динамически
setTimeout(() => {
const newButton = document.createElement("button");
newButton.classList.add("btn");
newButton.textContent = "Новая кнопка";
document.getElementById("container").appendChild(newButton);
}, 2000);


Ставь 👍 и забирай 📚 Базу знаний

BY Frontend | Вопросы собесов


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/easy_javascript_ru/1168

View MORE
Open in Telegram


Frontend | Вопросы собесов Telegram | DID YOU KNOW?

Date: |

Should I buy bitcoin?

“To the extent it is used I fear it’s often for illicit finance. It’s an extremely inefficient way of conducting transactions, and the amount of energy that’s consumed in processing those transactions is staggering,” the former Fed chairwoman said. Yellen’s comments have been cited as a reason for bitcoin’s recent losses. However, Yellen’s assessment of bitcoin as a inefficient medium of exchange is an important point and one that has already been raised in the past by bitcoin bulls. Using a volatile asset in exchange for goods and services makes little sense if the asset can tumble 10% in a day, or surge 80% over the course of a two months as bitcoin has done in 2021, critics argue. To put a finer point on it, over the past 12 months bitcoin has registered 8 corrections, defined as a decline from a recent peak of at least 10% but not more than 20%, and two bear markets, which are defined as falls of 20% or more, according to Dow Jones Market Data.

Pinterest (PINS) Stock Sinks As Market Gains

Pinterest (PINS) closed at $71.75 in the latest trading session, marking a -0.18% move from the prior day. This change lagged the S&P 500's daily gain of 0.1%. Meanwhile, the Dow gained 0.9%, and the Nasdaq, a tech-heavy index, lost 0.59%. Heading into today, shares of the digital pinboard and shopping tool company had lost 17.41% over the past month, lagging the Computer and Technology sector's loss of 5.38% and the S&P 500's gain of 0.71% in that time. Investors will be hoping for strength from PINS as it approaches its next earnings release. The company is expected to report EPS of $0.07, up 170% from the prior-year quarter. Our most recent consensus estimate is calling for quarterly revenue of $467.87 million, up 72.05% from the year-ago period.

Frontend | Вопросы собесов from us


Telegram Frontend | Вопросы собесов
FROM USA