Intersection Observer в JavaScript и зачем он используется?Intersection Observer — это API, которое позволяет отслеживать, когда элемент появляется или исчезает из области видимости (viewport). Он полезен для ленивой загрузки изображений, бесконечной прокрутки и анимаций при прокрутке.🗣️ В этом примере Intersection Observer отслеживает элемент .observe-me и выполняет код, когда элемент появляется в области видимости. Это позволяет избежать постоянного использования события scroll, улучшая производительность.
• React Native, TypeScript, HTML, CSS, React• от 150 000 до 200 000 ₽ | 1–3 года• PHP8, MySQL, JavaScript, Node.js, Git, Linux• от 300 000 до 700 000 ₽ | 5+ лет• PHP, Yii framework, Symfony, PostgreSQL, JSON, Git, ООП, Docker, CI/CD• Уровень дохода не указан | 5+ лет• Пользователь вводит текст задачи в поле и нажимает кнопку "Добавить".• Новая задача добавляется в список с кнопкой "Удалить" рядом с ней.• При нажатии на кнопку "Удалить" задача исчезает из списка.
<input />
<button>Добавить</button>
const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');
addButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText === '') return; // Не добавляем пустые задачи
const listItem = document.createElement('li');
listItem.textContent = taskText;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Удалить';
deleteButton.style.marginLeft = '10px';
deleteButton.addEventListener('click', () => {
taskList.removeChild(listItem);
});
listItem.appendChild(deleteButton);
taskList.appendChild(listItem);
taskInput.value = ''; // Очищаем поле ввода
});
addEventListener в JavaScript?addEventListener — это метод, который позволяет добавлять обработчики событий к элементам на странице.🗣️ В этом примере метод addEventListener связывает событие клика с кнопкой, выполняя функцию handleClick. Этот подход позволяет динамически добавлять или удалять обработчики.
const observer = new IntersectionObserver((entries) => {// Функция для обработки клика