Браузер: DOM, события и модель Flashcards by Андрій Владимиров

Как определить находится ли компонент в области видимости экрана(коротко)

Для определения, находится ли компонент в области видимости экрана, используйте Intersection Observer API. Он позволяет асинхронно отслеживать пересечение элемента с областью видимости предка или корневого элемента.

How well did you know this?

Not at all

Perfectly

Как определить находится ли компонент в области видимости экрана

Intersection Observer API — это современный способ отслеживания видимости элементов на странице. Он позволяет определить, когда элемент пересекает границы видимой области экрана или другого элемента-контейнера. Это полезно для реализации ленивой загрузки изображений, бесконечной прокрутки, анимаций при прокрутке и других задач.

Как это работает
Intersection Observer API работает асинхронно и не требует постоянного отслеживания прокрутки, что делает его более производительным по сравнению с традиционными методами, такими как scroll события.

Пример использования
Рассмотрим пример, где мы определяем, находится ли элемент в области видимости экрана:

// Создаем функцию-обработчик, которая будет вызываться при пересечении
function handleIntersection(entries, observer) {
entries.forEach(entry => {
// entry.isIntersecting будет true, если элемент виден
if (entry.isIntersecting) {
console.log(‘Элемент в области видимости’);
// Можно выполнить дополнительные действия, например, загрузить изображение
} else {
console.log(‘Элемент вне области видимости’);
}
});
}

// Создаем новый Intersection Observer
const observer = new IntersectionObserver(handleIntersection, {
root: null, // null означает, что корнем является viewport
rootMargin: ‘0px’, // Отступы вокруг корня
threshold: 0.1 // Процент видимости элемента, при котором вызывается callback
});

// Находим элемент, который нужно отслеживать
const targetElement = document.querySelector(‘#myElement’);

// Начинаем наблюдение за элементом
observer.observe(targetElement);

How well did you know this?

Not at all

Perfectly

Как определить находится ли компонент в области видимости экрана(коротко)

Подробный разбор кода

Функция handleIntersection:

Принимает два параметра: entries (массив объектов IntersectionObserverEntry) и observer (сам объект наблюдателя).
Для каждого entry проверяется свойство isIntersecting, которое указывает, виден ли элемент.
Создание IntersectionObserver:

IntersectionObserver принимает функцию-обработчик и объект с опциями.
root: элемент, относительно которого проверяется видимость. null означает, что используется viewport.
rootMargin: отступы вокруг корня, которые можно использовать для расширения или сужения области видимости.
threshold: процент видимости элемента, при котором вызывается обработчик. Например, 0.1 означает, что обработчик вызовется, когда 10% элемента будет видимо.
Наблюдение за элементом:

observer.observe(targetElement): начинает отслеживание видимости targetElement.
Применение
Intersection Observer API широко используется для:

Ленивой загрузки изображений: загружать изображения только тогда, когда они становятся видимыми.
Реализации бесконечной прокрутки: подгружать новые данные, когда пользователь прокручивает страницу.
Анимаций при прокрутке: запускать анимации, когда элемент становится видимым.
Отслеживания рекламы: определять, когда реклама видна пользователю.
Этот API поддерживается большинством современных браузеров, что делает его предпочтительным выбором для задач, связанных с видимостью элементов.

How well did you know this?

Not at all

Perfectly

Какие типичные причины утечек памяти, связанных с DOM-событиями

(кратко)

Утечки памяти, связанные с DOM-событиями, часто возникают из-за незавершенных подписок на события, когда обработчики событий не удаляются при удалении элементов из DOM. Это приводит к тому, что ссылки на удаленные элементы сохраняются в памяти, предотвращая их сборку мусора.

How well did you know this?

Not at all

Perfectly

Какие типичные причины утечек памяти, связанных с DOM-событиями

Подробное объяснение темы

Утечки памяти в JavaScript происходят, когда память, выделенная для объектов, не освобождается, даже если эти объекты больше не нужны. В контексте DOM-событий это часто связано с обработчиками событий, которые остаются привязанными к элементам, даже если сами элементы были удалены из DOM.

Почему это важно
Утечки памяти могут привести к увеличению использования памяти, что в конечном итоге может замедлить работу приложения и даже привести к его сбою. В веб-приложениях это особенно критично, так как они должны работать плавно и эффективно на различных устройствах и в разных браузерах.

Как это происходит
Обработчики событий: Когда вы добавляете обработчик события к элементу DOM, вы создаете ссылку на этот элемент. Если элемент удаляется из DOM, но обработчик события не удаляется, ссылка на элемент сохраняется через обработчик, что предотвращает сборку мусора.

Замыкания: Если обработчик события использует замыкание, которое ссылается на переменные из внешней области видимости, это может также удерживать в памяти ненужные данные.

Глобальные ссылки: Если обработчики событий ссылаются на глобальные объекты или переменные, это может также привести к утечкам памяти, так как эти ссылки могут оставаться активными даже после удаления элемента.

Пример кода
// Создаем элемент и добавляем его в DOM
let button = document.createElement(‘button’);
button.textContent = ‘Click me’;
document.body.appendChild(button);

// Добавляем обработчик события
function handleClick() {
console.log(‘Button clicked’);
}

button.addEventListener(‘click’, handleClick);

// Позже удаляем элемент из DOM
document.body.removeChild(button);

// Обработчик события не удален, что приводит к утечке памяти
Объяснение кода
Создание элемента: Создается кнопка и добавляется в DOM. Это стандартная операция для динамического создания элементов.

Добавление обработчика события: Функция handleClick добавляется как обработчик события click для кнопки. Это создает ссылку на элемент через обработчик.

Удаление элемента: Кнопка удаляется из DOM, но обработчик события остается привязанным к элементу, что предотвращает его сборку мусора.

Как избежать утечек памяти
Удаление обработчиков событий: Перед удалением элемента из DOM всегда удаляйте все обработчики событий, связанные с ним.
button.removeEventListener(‘click’, handleClick);
document.body.removeChild(button);
Использование слабых ссылок: В некоторых случаях можно использовать WeakMap или WeakSet для хранения ссылок на элементы, что позволяет сборщику мусора удалять их, когда они больше не нужны.

Регулярный аудит кода: Периодически проверяйте код на наличие потенциальных утечек памяти, особенно в больших приложениях.

Понимание и предотвращение утечек памяти, связанных с DOM-событиями, является важной частью разработки эффективных и надежных веб-приложений.

How well did you know this?

Not at all

Perfectly

Что такое DOM

кратко

DOM (Document Object Model) — это программный интерфейс для HTML и XML документов, который представляет документ в виде дерева объектов. Он позволяет скриптам динамически изменять содержание, структуру и стиль веб-страницы.

How well did you know this?

Not at all

Perfectly

Что такое DOM

Подробное объяснение темы

DOM, или Document Object Model, — это концепция, которая позволяет разработчикам взаимодействовать с HTML и XML документами в браузере. Когда браузер загружает веб-страницу, он создает DOM, который представляет структуру документа в виде дерева объектов. Это дерево позволяет скриптам, таким как JavaScript, изменять документ на лету.

Зачем нужен DOM
DOM необходим для того, чтобы разработчики могли динамически изменять веб-страницы без необходимости их перезагрузки. Это позволяет создавать интерактивные и динамичные пользовательские интерфейсы. Например, с помощью DOM можно добавлять новые элементы на страницу, изменять текст, стили, реагировать на действия пользователя и многое другое.

Как работает DOM
Когда браузер загружает HTML-документ, он парсит его и создает DOM-дерево. Каждый элемент HTML становится узлом в этом дереве. Узлы могут быть элементами, атрибутами, текстом и комментариями. DOM предоставляет методы и свойства для доступа и манипуляции этими узлами.

Пример работы с DOM
Рассмотрим простой пример, где мы изменим текст элемента на веб-странице с помощью JavaScript.

HTML:

<!DOCTYPE html>

<html>
<head>
<meta></meta>
<meta></meta>
<title>DOM Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<button>Change Text</button>

<script>
function changeText() {
            // Получаем элемент с id "title"
            var titleElement = document.getElementById('title');
            // Изменяем текстовое содержимое элемента
            titleElement.textContent = 'Hello, DOM!';
        }
</script>

</body>
</html>

Объяснение кода:
<!DOCTYPE html>: Определяет тип документа и версию HTML.

<html>: Начало HTML-документа с указанием языка.
<head>: Содержит метаданные документа, такие как кодировка и заголовок.
<body>: Основное содержимое документа.
<h1>Hello, World!</h1>: Заголовок с уникальным идентификатором id="title".
<button>Change Text</button>: Кнопка, которая вызывает функцию changeText() при нажатии.

<script>
: Содержит JavaScript-код.
function changeText(): Определяет функцию, которая изменяет текст заголовка.
document.getElementById('title'): Метод DOM, который возвращает элемент с указанным id.
titleElement.textContent = 'Hello, DOM!';: Изменяет текстовое содержимое элемента.
Этот пример демонстрирует, как с помощью DOM можно взаимодействовать с элементами HTML, изменяя их содержимое в ответ на действия пользователя. DOM является основой для создания интерактивных веб-приложений и позволяет разработчикам эффективно управлять содержимым и структурой веб-страниц.
</script>

</body></head></html>

How well did you know this?

Not at all

Perfectly

В какой момент обычно отлавливается событие

Подробное объяснение темы

В веб-разработке события играют ключевую роль в создании интерактивных пользовательских интерфейсов. Событие — это сигнал, который сообщает о том, что что-то произошло, например, пользователь кликнул на кнопку, загрузилась страница или изменилось значение в поле ввода.

Как работают события
Когда пользователь взаимодействует с веб-страницей, браузер генерирует события. Эти события могут быть связаны с действиями пользователя (например, клики мышью, нажатия клавиш) или с изменениями состояния документа (например, загрузка страницы, изменение размера окна).

Обработчики событий
Чтобы реагировать на события, разработчики используют обработчики событий. Обработчик события — это функция, которая выполняется в ответ на определенное событие. Обработчики привязываются к элементам DOM и срабатывают, когда происходит соответствующее событие.

Пример кода
Рассмотрим простой пример, где мы отлавливаем событие клика на кнопке:

<!DOCTYPE html>

<html>
<head>
<meta></meta>
<meta></meta>
<title>Event Handling Example</title>
</head>
<body>
<button>Click me</button>

<script>
// Получаем элемент кнопки по её ID
        const button = document.getElementById('myButton');

        // Привязываем обработчик события 'click' к кнопке
        button.addEventListener('click', function() {
            // Эта функция выполнится, когда произойдет событие 'click'
            alert('Button was clicked!');
        });
</script>

</body>
</html>

const button = document.getElementById(‘myButton’);: Получаем элемент кнопки из DOM по её уникальному идентификатору myButton.
button.addEventListener(‘click’, function() {…});: Привязываем обработчик события к кнопке. Метод addEventListener принимает два аргумента: тип события (‘click’) и функцию-обработчик, которая будет выполнена при возникновении этого события.
alert(‘Button was clicked!’);: Когда пользователь кликает на кнопку, срабатывает обработчик события, и появляется всплывающее окно с сообщением.
Зачем это нужно
Отлавливание событий позволяет создавать динамичные и отзывчивые интерфейсы. Это позволяет приложениям реагировать на действия пользователя, обновлять интерфейс без перезагрузки страницы и обеспечивать более интерактивный пользовательский опыт.

Где применяется
События и их обработка применяются везде, где требуется взаимодействие с пользователем: от простых форм и кнопок до сложных приложений с динамическим контентом. Это основа для реализации таких функций, как валидация форм, динамическое обновление данных, анимации и многое другое.

How well did you know this?

Not at all

Perfectly

В какой момент обычно отлавливается событие

кратко

Событие обычно отлавливается в момент его возникновения в браузере, когда пользователь взаимодействует с элементом интерфейса или когда происходит изменение состояния приложения. Это достигается с помощью обработчиков событий, которые привязываются к элементам DOM и срабатывают при наступлении определенного события.

How well did you know this?

Not at all

Perfectly

Как остановить всплытие события

Для остановки всплытия события в JavaScript используется метод stopPropagation(). Этот метод вызывается на объекте события внутри обработчика, чтобы предотвратить дальнейшее распространение события по дереву DOM.

How well did you know this?

Not at all

Perfectly

Какие плюсы и минусы делегирования событий

кратко

Делегирование событий позволяет обрабатывать события на родительском элементе вместо множества дочерних, что улучшает производительность и упрощает управление событиями. Однако оно может усложнить код, если не учитывать специфические условия, такие как динамически добавляемые элементы или необходимость точного определения цели события.

How well did you know this?

Not at all

Perfectly

Какие плюсы и минусы делегирования событий

Подробное объяснение темы

Делегирование событий — это техника в JavaScript, которая позволяет назначать обработчик события на родительский элемент, чтобы управлять событиями, происходящими на его дочерних элементах. Это особенно полезно, когда у нас есть множество элементов, которые требуют одинаковой обработки событий, или когда элементы создаются динамически.

Преимущества делегирования событий
Улучшение производительности: Вместо того чтобы назначать обработчик события на каждый дочерний элемент, мы назначаем его на одного родителя. Это снижает количество обработчиков, которые браузер должен отслеживать, что может значительно улучшить производительность, особенно в случае большого количества элементов.

Упрощение управления событиями: Когда элементы добавляются или удаляются динамически, делегирование событий позволяет избежать необходимости повторного назначения обработчиков для новых элементов. Обработчик на родительском элементе автоматически будет обрабатывать события для новых дочерних элементов.

Снижение потребления памяти: Меньшее количество обработчиков событий означает меньшее потребление памяти, что особенно важно для мобильных устройств и приложений с ограниченными ресурсами.

Недостатки делегирования событий
Сложность кода: Делегирование событий может усложнить код, так как необходимо правильно определить, на каком элементе произошло событие. Это требует использования свойства event.target и дополнительных проверок.

Проблемы с точностью: Если не учитывать специфические условия, такие как вложенные элементы или элементы с перекрывающимися событиями, это может привести к некорректной обработке событий.

Проблемы с производительностью при глубокой вложенности: Если родительский элемент находится на значительной глубине в DOM-дереве, это может привести к задержкам в обработке событий, так как событие должно пройти через все уровни вложенности.

Пример кода
Рассмотрим пример, где у нас есть список элементов, и мы хотим обрабатывать клики на каждом из них:

Вместо того чтобы назначать обработчик события на каждый <li>, мы назначим его на <ul>:

How well did you know this?

Not at all

Perfectly

Что происходит после формирования DOM

кратко

После формирования DOM браузер начинает рендеринг страницы, включая построение CSSOM, объединение DOM и CSSOM в рендер-дерево, вычисление геометрии элементов (layout), и отрисовку (paint) элементов на экране. Затем браузер обрабатывает события и выполняет JavaScript.

How well did you know this?

Not at all

Perfectly

Что происходит после формирования DOM

Подробное объяснение темы

После того как браузер завершает парсинг HTML и формирует DOM (Document Object Model), начинается процесс рендеринга страницы. Этот процесс включает несколько ключевых этапов:

Построение CSSOM (CSS Object Model):

Браузер парсит все CSS-стили, которые применяются к странице, включая внешние стили и встроенные в HTML.
На основе этих стилей создается CSSOM, который представляет собой структуру данных, описывающую стили, примененные к элементам DOM.
Создание рендер-дерева:

DOM и CSSOM объединяются для создания рендер-дерева. Это дерево содержит только те узлы, которые видимы на странице (например, узлы с display: none исключаются).
Каждый узел рендер-дерева знает, какие стили к нему применены.
Layout (вычисление геометрии):

Браузер вычисляет размеры и положение каждого элемента на странице. Этот процесс называется layout или reflow.
На этом этапе определяется, где именно на экране будет находиться каждый элемент.
Paint (отрисовка):

Браузер рисует пиксели на экране. Это включает в себя отрисовку текста, цветов, границ, изображений и других визуальных элементов.
Процесс отрисовки может быть сложным, так как браузер должен учитывать наложение элементов, прозрачность и другие визуальные эффекты.
Композиция:

На этом этапе браузер объединяет все слои и элементы, чтобы создать финальное изображение, которое пользователь видит на экране.
Композиция может включать в себя аппаратное ускорение для повышения производительности.
Обработка событий и выполнение JavaScript:

После того как страница отрисована, браузер начинает обрабатывать события, такие как клики, наведение мыши и другие взаимодействия пользователя.
JavaScript, который был загружен и готов к выполнению, начинает выполняться. Это может включать в себя манипуляции с DOM, что может вызвать повторное выполнение layout и paint, если изменяются размеры или стили элементов.
Пример кода, иллюстрирующий манипуляцию с DOM и последующие изменения:

<!DOCTYPE html>

        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

</style>
<title>DOM Manipulation</title>
</head>
<body>
<div></div>

<script>
// Находим элемент с классом 'box'
        const box = document.querySelector('.box');

        // Изменяем его размер и цвет через 2 секунды
        setTimeout(() => {
            // Изменение стиля элемента
            box.style.width = '200px';
            box.style.height = '200px';
            box.style.backgroundColor = 'blue';

            // Эти изменения вызовут повторное выполнение layout и paint
        }, 2000);
</script>

</body>
</html>

HTML: Создает базовую структуру страницы с элементом div класса box.
CSS: Определяет начальные стили для элемента box.
JavaScript: Находит элемент box и через 2 секунды изменяет его размеры и цвет. Эти изменения вызывают повторное выполнение layout и paint, так как изменяются размеры и стили элемента

How well did you know this?

Not at all

Perfectly

Что происходит, когда в DOM происходит установка и чтение значения

кратко

При установке значения в DOM браузер обновляет соответствующий элемент, изменяя его свойства или атрибуты. При чтении значения из DOM браузер возвращает текущее состояние элемента, включая его свойства и атрибуты. Эти операции могут влиять на производительность, так как могут вызывать перерисовку или перерасчет стилей.

How well did you know this?

Not at all

Perfectly

Что происходит, когда в DOM происходит установка и чтение значения

Подробное объяснение темы

Study These Flashcards

DOM (Document Object Model) — это программный интерфейс для веб-документов. Он представляет документ в виде дерева объектов, где каждый узел является частью документа. Когда мы говорим об установке и чтении значений в DOM, мы имеем в виду взаимодействие с этими узлами.

Установка значения в DOM
Когда вы устанавливаете значение в DOM, вы изменяете состояние одного из узлов дерева. Это может быть изменение текста, атрибута или стиля элемента. Например, если вы хотите изменить текст внутри элемента <div>, вы можете сделать это с помощью JavaScript:

// Получаем элемент по его идентификатору
const element = document.getElementById(‘myDiv’);

// Устанавливаем новое текстовое содержимое
element.textContent = ‘Новый текст’;
document.getElementById(‘myDiv’): Находит элемент с идентификатором myDiv в DOM.
element.textContent = ‘Новый текст’;: Устанавливает новое текстовое содержимое для найденного элемента.
При изменении значения в DOM браузер может выполнить несколько действий:

Перерасчет стилей: Если изменение влияет на стили, браузер пересчитывает CSS-стили для элемента и его потомков.
Перерисовка: Если изменение влияет на внешний вид элемента, браузер перерисовывает его.
Реализация изменений: Браузер обновляет визуальное представление страницы, чтобы отразить изменения.
Чтение значения из DOM
Чтение значения из DOM означает получение текущего состояния элемента. Это может быть текстовое содержимое, значение атрибута или стиль. Например, чтобы получить текст из элемента <div>, вы можете использовать:

// Получаем элемент по его идентификатору
const element = document.getElementById(‘myDiv’);

// Читаем текстовое содержимое
const text = element.textContent;
document.getElementById(‘myDiv’): Находит элемент с идентификатором myDiv в DOM.
element.textContent: Возвращает текстовое содержимое элемента.
Чтение значений из DOM может также повлиять на производительность, особенно если это связано с вычислением стилей или размеров элементов. Например, получение значения offsetWidth или offsetHeight может вызвать перерасчет стилей, так как браузер должен убедиться, что у него есть актуальная информация о размерах элемента.

Зачем это нужно
Установка и чтение значений в DOM — это основа динамического взаимодействия с веб-страницей. Они позволяют изменять содержимое страницы в ответ на действия пользователя, обновлять данные в реальном времени и создавать интерактивные интерфейсы. Однако важно помнить о влиянии этих операций на производительность и стараться минимизировать их количество, чтобы обеспечить плавную работу приложения.

Что такое ShadowDOM

кратко

Study These Flashcards

Shadow DOM — это технология, позволяющая инкапсулировать DOM и стили веб-компонента, изолируя их от остальной части документа. Это предотвращает конфликты стилей и обеспечивает независимость компонентов.

Что такое ShadowDOM

Подробное объяснение темы

Study These Flashcards

Shadow DOM — это часть спецификации Web Components, которая позволяет разработчикам создавать инкапсулированные DOM и стили для веб-компонентов. Это означает, что элементы внутри Shadow DOM не влияют на внешний DOM и наоборот. Shadow DOM помогает избежать конфликтов стилей и обеспечивает независимость компонентов.

Зачем нужен Shadow DOM
Инкапсуляция стилей и разметки: Shadow DOM позволяет скрыть внутреннюю структуру компонента и его стили от остальной части страницы. Это предотвращает случайные изменения и конфликты стилей.

Повторное использование компонентов: Благодаря изоляции, компоненты можно использовать в разных частях приложения без риска изменения их поведения из-за внешних стилей.

Упрощение разработки: Разработчики могут сосредоточиться на логике компонента, не беспокоясь о влиянии внешних стилей.

Как работает Shadow DOM
Когда вы создаете Shadow DOM, вы создаете “теневой” корень, который становится отдельной областью для DOM-узлов и стилей. Этот корень изолирован от основного документа.

Пример использования Shadow DOM
<!DOCTYPE html>

<html>
<head>
<meta></meta>
<meta></meta>
<title>Shadow DOM Example</title>
</head>
<body>
<my-element></my-element>

<script>
// Создаем класс для нового элемента
        class MyElement extends HTMLElement {
            constructor() {
                super();
                // Создаем Shadow Root
                const shadow = this.attachShadow({ mode: 'open' });

                // Создаем элемент div
                const div = document.createElement('div');
                div.textContent = 'Hello from Shadow DOM';

                // Создаем стиль для элемента
                const style = document.createElement('style');
                style.textContent = `
                    div {
                        color: white;
                        background-color: black;
                        padding: 10px;
                    }
                `;

                // Присоединяем стиль и div к Shadow Root
                shadow.appendChild(style);
                shadow.appendChild(div);
            }
        }

        // Регистрируем новый элемент
        customElements.define('my-element', MyElement);
</script>

</body>
</html>

Объяснение кода
class MyElement extends HTMLElement: Создаем новый класс, который наследует от HTMLElement, чтобы создать пользовательский элемент.

constructor(): Конструктор вызывается при создании экземпляра элемента. Здесь мы инициализируем Shadow DOM.

const shadow = this.attachShadow({ mode: ‘open’ });: Создаем Shadow Root с режимом open, что позволяет доступ к Shadow DOM через JavaScript.

const div = document.createElement(‘div’);: Создаем элемент div, который будет частью Shadow DOM.

div.textContent = ‘Hello from Shadow DOM’;: Устанавливаем текстовое содержимое для div.

const style = document.createElement(‘style’);: Создаем элемент style для стилизации содержимого Shadow DOM.

style.textContent = …: Определяем стили, которые будут применяться только к элементам внутри Shadow DOM.

shadow.appendChild(style); и shadow.appendChild(div);: Добавляем стиль и div в Shadow Root, изолируя их от остальной части документа.

customElements.define(‘my-element’, MyElement);: Регистрируем новый пользовательский элемент <my-element>, который будет использовать наш класс MyElement.</my-element>

Shadow DOM позволяет создавать компоненты, которые могут быть использованы повторно и не зависят от внешних стилей, что делает их более надежными и предсказуемыми в поведении.

Какие есть опции у addEventListener (capture, once, passive) и как они влияют на поведение обработчика?

кратко

Study These Flashcards

Метод addEventListener принимает три опции: capture, once и passive. Опция capture определяет, будет ли обработчик вызван на стадии захвата события. Опция once указывает, что обработчик должен быть вызван только один раз и затем удален. Опция passive сообщает браузеру, что обработчик не будет вызывать preventDefault, что может улучшить производительность при прокрутке.

Какие есть опции у addEventListener (capture, once, passive) и как они влияют на поведение обработчика?

Подробное объяснение темы

Study These Flashcards

Метод addEventListener используется для добавления обработчиков событий к элементам в DOM. Он принимает три параметра: тип события, функцию-обработчик и объект с опциями. Эти опции позволяют более точно контролировать поведение обработчика событий.

Опция capture
Опция capture определяет, на какой стадии события будет вызван обработчик: на стадии захвата или на стадии всплытия. По умолчанию, события обрабатываются на стадии всплытия, но если capture установлено в true, обработчик будет вызван на стадии захвата.

document.getElementById(‘myElement’).addEventListener(‘click’, function(event) {
console.log(‘Capture phase’);
}, true); // true означает, что обработчик будет вызван на стадии захвата
Стадия захвата: Событие идет сверху вниз по дереву DOM, начиная с корневого элемента.
Стадия всплытия: Событие идет снизу вверх, начиная с целевого элемента.
Опция once
Опция once указывает, что обработчик должен быть вызван только один раз. После первого вызова обработчик автоматически удаляется.

document.getElementById(‘myElement’).addEventListener(‘click’, function(event) {
console.log(‘This will log only once’);
}, { once: true });
Преимущество: Удобно для событий, которые должны быть обработаны только один раз, например, при первом клике на кнопку.
Опция passive
Опция passive сообщает браузеру, что обработчик не будет вызывать preventDefault. Это позволяет браузеру оптимизировать производительность, особенно при прокрутке.

Что такое EventTarget

кратко

Study These Flashcards

EventTarget — это интерфейс в JavaScript, который реализуют все объекты, способные принимать события и иметь слушателей событий. Это основа для работы с событиями в DOM, таких как элементы HTML, документ и окно.

Что такое EventTarget

Подробное объяснение темы

Study These Flashcards

EventTarget — это интерфейс, который определяет методы, необходимые для работы с событиями в JavaScript. Он является частью DOM API и используется для управления событиями, такими как клики мыши, нажатия клавиш и другие пользовательские взаимодействия.

Зачем нужен EventTarget
EventTarget позволяет объектам в JavaScript принимать события и иметь слушателей событий. Это основа для взаимодействия пользователя с веб-страницей. Например, когда пользователь нажимает кнопку на веб-странице, событие “click” может быть обработано с помощью EventTarget.

Где применяется EventTarget
EventTarget применяется везде, где необходимо обрабатывать события. Это могут быть:

HTML элементы (например, <button>, <div>)
Объект document
Объект window
Другие объекты, которые могут генерировать события, такие как WebSocket или XMLHttpRequest
Как работает EventTarget
EventTarget предоставляет три основных метода:</button>

addEventListener(type, listener): добавляет слушателя для указанного типа события.
removeEventListener(type, listener): удаляет ранее добавленный слушатель для указанного типа события.
dispatchEvent(event): инициирует событие, вызывая всех слушателей, зарегистрированных для этого типа события.
Пример использования EventTarget
Рассмотрим пример, где мы добавляем обработчик события на кнопку:

<button>Click me</button>
// Получаем элемент кнопки из DOM
const button = document.getElementById(‘myButton’);

// Определяем функцию-обработчик события
function handleClick(event) {
console.log(‘Button was clicked!’);
}

// Добавляем обработчик события ‘click’ к кнопке
button.addEventListener(‘click’, handleClick);

//

// Позже, если нужно, можно удалить обработчик
// button.removeEventListener(‘click’, handleClick);
const button = document.getElementById(‘myButton’);: Получаем элемент кнопки из DOM по его идентификатору.
function handleClick(event) {…}: Определяем функцию, которая будет вызвана при возникновении события. В данном случае, она просто выводит сообщение в консоль.
button.addEventListener(‘click’, handleClick);: Добавляем обработчик события ‘click’ к кнопке. Теперь, когда пользователь нажимает на кнопку, вызывается функция handleClick.
button.removeEventListener(‘click’, handleClick);: Если необходимо, можно удалить обработчик события, чтобы он больше не вызывался при клике.
EventTarget — это фундаментальная часть работы с событиями в JavaScript, обеспечивающая гибкость и контроль над взаимодействиями пользователя с веб-страницей.

Что такое CurrentTarget

кратко

Study These Flashcards

currentTarget — это свойство объекта события в JavaScript, которое указывает на элемент, к которому прикреплен обработчик события. Оно всегда ссылается на элемент, на котором был вызван обработчик, в отличие от target, который указывает на элемент, инициировавший событие.

Что такое CurrentTarget

Подробное объяснение темы

Study These Flashcards

В JavaScript для работы с событиями используется объект события, который содержит информацию о событии и его контексте. Одним из ключевых свойств этого объекта является currentTarget.

Зачем нужен currentTarget
Когда происходит событие, например, клик мыши, оно может инициироваться на одном элементе, но обработчик события может быть привязан к другому элементу. currentTarget помогает определить, к какому элементу был привязан обработчик события, что особенно полезно при использовании делегирования событий.

Различие между target и currentTarget
target: Указывает на элемент, на котором произошло событие. Это может быть вложенный элемент, например, кнопка внутри контейнера.
currentTarget: Указывает на элемент, к которому прикреплен обработчик события. Это всегда будет элемент, на котором был вызван обработчик.
Пример использования
Рассмотрим пример, где мы используем делегирование событий:

<div>
<button>Button 1</button>
<button>Button 2</button>
</div>


  // Получаем элемент контейнера
  const container = document.getElementById('container');

  // Добавляем обработчик события на контейнер
  container.addEventListener('click', function(event) {
    // event.currentTarget указывает на контейнер
    console.log('currentTarget:', event.currentTarget);

    // event.target указывает на элемент, на котором произошло событие
    console.log('target:', event.target);
  });

Объяснение кода:
HTML-разметка: У нас есть div с двумя кнопками внутри. Это наш контейнер, к которому мы будем привязывать обработчик события.

Получение элемента контейнера: Мы используем document.getElementById(‘container’), чтобы получить ссылку на элемент div.

Добавление обработчика события: Мы добавляем обработчик события click на контейнер. Это значит, что каждый раз, когда происходит клик внутри контейнера, будет вызываться эта функция.

Использование currentTarget и target:

event.currentTarget всегда будет указывать на div с id container, потому что обработчик события привязан именно к этому элементу.
event.target указывает на конкретный элемент, на котором произошло событие. Если пользователь кликнет на одну из кнопок, event.target будет указывать на эту кнопку.
Применение
currentTarget особенно полезен в ситуациях, когда вы используете делегирование событий. Это позволяет вам обрабатывать события на родительском элементе, даже если событие инициировано на вложенном элементе. Это упрощает код и улучшает производительность, так как вам не нужно добавлять обработчики событий на каждый вложенный элемент

Какие знаешь фазы DOM Events | кратко

В DOM Events существует три фазы: захват (capture), цель (target) и всплытие (bubble). Сначала событие проходит через фазу захвата, начиная с корневого элемента и доходя до целевого элемента. Затем происходит фаза цели, где событие обрабатывается на целевом элементе. Наконец, событие проходит через фазу всплытия, возвращаясь обратно к корневому элементу.

Какие знаешь фазы DOM Events | Подробное объяснение темы

Когда в веб-приложении происходит событие, например, клик мыши, оно проходит через несколько этапов, называемых фазами. Эти фазы определяют, как и в каком порядке обработчики событий будут вызваны. Понимание этих фаз важно для правильного управления событиями и предотвращения нежелательных эффектов. Фаза захвата (Capture Phase) Фаза захвата начинается с самого верхнего элемента в DOM-дереве и движется вниз к целевому элементу, на котором произошло событие. На этом этапе обработчики событий, зарегистрированные с использованием addEventListener с третьим параметром true, будут вызваны. document.addEventListener('click', function() { console.log('Document capture'); }, true); document.querySelector('#myElement').addEventListener('click', function() { console.log('Element capture'); }, true); document.addEventListener('click', ..., true);: Обработчик события для документа, который будет вызван на фазе захвата. document.querySelector('#myElement').addEventListener('click', ..., true);: Обработчик события для конкретного элемента, который также будет вызван на фазе захвата. Фаза цели (Target Phase) Фаза цели происходит, когда событие достигает целевого элемента. На этом этапе обработчики событий, зарегистрированные на целевом элементе, будут вызваны. Это происходит независимо от того, был ли обработчик зарегистрирован для захвата или всплытия. document.querySelector('#myElement').addEventListener('click', function() { console.log('Element target'); }); document.querySelector('#myElement').addEventListener('click', ...);: Обработчик события для целевого элемента, который будет вызван на фазе цели. Фаза всплытия (Bubble Phase) Фаза всплытия начинается с целевого элемента и движется вверх по дереву DOM к корневому элементу. На этом этапе обработчики событий, зарегистрированные с использованием addEventListener с третьим параметром false или без него, будут вызваны. document.querySelector('#myElement').addEventListener('click', function() { console.log('Element bubble'); }); document.addEventListener('click', function() { console.log('Document bubble'); }); document.querySelector('#myElement').addEventListener('click', ...);: Обработчик события для элемента, который будет вызван на фазе всплытия. document.addEventListener('click', ...);: Обработчик события для документа, который будет вызван на фазе всплытия. Применение и важность Понимание фаз событий важно для управления поведением событий в сложных интерфейсах. Например, если нужно предотвратить выполнение обработчиков на фазе всплытия, можно использовать метод event.stopPropagation(). Это позволяет более точно контролировать, какие обработчики будут вызваны и в каком порядке, что особенно важно в приложениях с динамическим содержимым и сложной структурой DOM.

Как отловить событие на погружение | кратко

Для отлова события на фазе погружения в JavaScript используйте метод addEventListener с третьим параметром true. Это указывает, что обработчик должен срабатывать на фазе погружения, а не на фазе всплытия.

Как отловить событие на погружение | Подробное объяснение темы

В JavaScript события могут проходить через три фазы: захват (погружение), цель и всплытие. Понимание этих фаз важно для управления тем, как события обрабатываются в DOM. Фаза захвата (погружение): Событие начинается с самого верхнего элемента DOM и проходит вниз к целевому элементу. Целевая фаза: Событие достигает целевого элемента. Фаза всплытия: Событие начинает подниматься обратно вверх по дереву DOM. По умолчанию, обработчики событий в JavaScript срабатывают на фазе всплытия. Однако, иногда требуется обработать событие на фазе погружения, например, для перехвата события до того, как оно достигнет целевого элемента. Для этого используется метод addEventListener, который принимает три параметра: Тип события (например, 'click'). Функция-обработчик события. Булевый параметр useCapture, который указывает, на какой фазе должен срабатывать обработчик. Если true, обработчик срабатывает на фазе погружения. Пример кода: // Получаем ссылку на элемент, на который хотим повесить обработчик const parentElement = document.getElementById('parent'); // Добавляем обработчик события на фазе погружения parentElement.addEventListener('click', function(event) { console.log('Событие поймано на фазе погружения'); }, true); const parentElement = document.getElementById('parent');: Получаем элемент DOM с идентификатором parent, на который будет добавлен обработчик события. parentElement.addEventListener('click', function(event) {...}, true);: Добавляем обработчик события click на элемент parentElement. Третий параметр true указывает, что обработчик должен срабатывать на фазе погружения. console.log('Событие поймано на фазе погружения');: Когда событие click происходит, и оно находится на фазе погружения, в консоль выводится сообщение. Использование фазы погружения может быть полезно, когда необходимо перехватить событие до того, как оно достигнет целевого элемента, например, для предотвращения его дальнейшей обработки или для выполнения каких-либо действий на более высоком уровне DOM.

В чём разница между target и currentTarget

target указывает на элемент, на котором произошло событие, тогда как currentTarget указывает на элемент, к которому прикреплен обработчик события.

В чем разница между StopPropagation и StopImmidiatePropagation | Как кратко ответить

stopPropagation предотвращает дальнейшее распространение события в фазе захвата или всплытия, но не останавливает выполнение других обработчиков на текущем элементе. stopImmediatePropagation останавливает не только распространение события, но и выполнение всех последующих обработчиков на текущем элементе.

В чем разница между StopPropagation и StopImmidiatePropagation | Подробное объяснение темы

В JavaScript события могут распространяться по дереву DOM в двух фазах: захват (capture) и всплытие (bubble). Когда событие происходит, оно сначала проходит через фазу захвата, начиная с корневого элемента и доходя до целевого элемента, а затем через фазу всплытия, возвращаясь обратно к корню. Иногда возникает необходимость контролировать это распространение. Для этого используются методы stopPropagation и stopImmediatePropagation. stopPropagation Метод stopPropagation используется для предотвращения дальнейшего распространения события в фазе захвата или всплытия. Однако, он не останавливает выполнение других обработчиков события, которые уже назначены на текущий элемент. Пример: Event Propagation

Parent

При клике на кнопку "Child" в консоль выведется "Child clicked" и "Another child handler". stopPropagation остановит распространение события, и "Parent clicked" не будет выведено. Однако, второй обработчик на элементе "Child" все равно выполнится. stopImmediatePropagation Метод stopImmediatePropagation останавливает не только дальнейшее распространение события, но и предотвращает выполнение всех последующих обработчиков на текущем элементе. Пример: Event Propagation

Parent

При клике на кнопку "Child" в консоль выведется только "Child clicked". stopImmediatePropagation остановит как распространение события, так и выполнение второго обработчика на элементе "Child". Применение Используйте stopPropagation, когда нужно остановить распространение события, но при этом разрешить выполнение других обработчиков на текущем элементе. Используйте stopImmediatePropagation, когда необходимо полностью остановить как распространение события, так и выполнение всех последующих обработчиков на текущем элементе. Это может быть полезно, когда нужно предотвратить выполнение нежелательных действий в ответ на событие.

Браузер: DOM, события и модель Flashcards

(31 cards)