Публикации по теме 'event-delegation'
Делегирование событий в JavaScript, хороший вариант использования для привязки к событиям на динамически генерируемых…
Введение
Делегирование событий — это шаблон JavaScript, в котором дочерние элементы позволяют или оставляют родительские элементы обрабатывать события от их имени. Это возможно благодаря тому факту, что события в JavaScript могут всплывать (перемещаться) от дочерних элементов к родительским элементам. Таким образом, делегирование событий позволяет нам обрабатывать события в родительском элементе, а не в целевом элементе, который в данном случае является дочерним.
Проблема..
Делегация мероприятия
Вы можете задаться вопросом: «Что такое делегирование событий?» Короче говоря, делегирование событий — это способ уменьшить количество прослушивателей событий, которые мы используем в нашем коде. Это бесценно для поддержания производительности и ограничения избыточности в нашей логике. Давайте посмотрим на пример.
Часто при разработке кода, который содержит некоторый тип «карточки» или несколько дочерних элементов, у нас будет какое-то событие щелчка, которое происходит с каждой из этих..
Что такое делегирование событий в JS
По умолчанию события, инициированные элементом, распространяются вверх по дереву DOM к родителю элемента, его предкам и далее до корневого элемента (HTML).
<div>
<span>
<button>Click Me!</button>
</span>
</div>
Здесь у нас есть div, который является родителем диапазона, который, в свою очередь, является родителем элемента кнопки.
Из-за всплытия событий, когда кнопка получает событие, скажем, щелчок, это событие всплывает вверх по дереву,..
LocalStorage и делегирование событий
Сегодня мы займемся локальным хранилищем, а также делегированием событий. Сначала нам даны 3 переменные. addItems , itemsList и items . addItems просто захватывает поле ввода, в котором мы перечисляем блюда, itemsList будет неупорядоченным списком, а items - пустым массивом.
Это что-то вроде чек-листа для блюд, и нам нужно все подключить. Первое, что мы делаем, это слушаем пользователя submit , который затем запускаем addItem . Мы также создадим addItem и журнал консоли..
Делегирование событий и оптимизация внешнего интерфейса, а также очень простой пример.
В настоящее время я изучаю Javascript для курса, и, черт возьми, примеры, которые я нахожу в Интернете, демонстрирующие некоторые концепции, просто не достигают точки зрения .
Итак, чтобы просто повторить для себя то, что я узнаю, я собираюсь объяснить это на самом простом старом английском языке, на который я способен. Эта небольшая заметка будет конгломератом лучших объяснений из других статей, которые имели наибольший смысл для меня, новичка, относительно делегирования событий и того,..
Распространение событий (буферизация и захват событий)
События не были интуитивными, когда я впервые услышал об этом. Но позже я понял, что события — это то, что делает сообщества веб-разработчиков живыми. События позволяют взаимодействовать между пользователями и веб-сайтами. События — от отправки учетных данных клиента до выбора товара в корзину — делают веб-сайты динамичными.
Распространение события : движение инициированного пользователем события внутри дерева HTML DOM.
Всплытие событий : восходящее движение инициированного..
Вопросы по теме 'event-delegation'
Как остановить всплытие событий с помощью jquery live?
Я пытаюсь остановить некоторые события, но stopPropagation не работает с «живым», поэтому я не уверен, что делать. Я нашел это на их сайте.
События Live не всплывают традиционным способом, и их нельзя остановить с помощью stopPropagation или...
22823 просмотров
schedule
08.03.2023
Настройка делегатов событий в подключаемом модуле проверки jQuery
В настоящее время я настраиваю подключаемый модуль проверки jQuery для использования в нашем проекте.
По умолчанию некоторые события автоматически настраиваются для обработки. т.е. включение/выключение фокуса, события нажатия клавиш на всех...
6877 просмотров
schedule
14.07.2022
делегирование событий с помощью jQuery 1.3.2
На данный момент я застрял в использовании jQuery 1.3.2 и только начинаю понимать делегирование событий в целом. Но я не могу заставить какое-либо делегирование событий работать с этим кодом. У меня есть ul с классом «чат», который при наведении...
1175 просмотров
schedule
07.07.2023
JavaScript: как имитировать событие изменения в Internet Explorer (делегирование)
ОБНОВЛЕНИЕ: (резюме, скрипка и награда)
Этот вопрос не получил особого внимания, поэтому я собираюсь потратить на него репутацию. Я знаю, что склонен к излишней многословности как в ответах, так и в вопросах. Вот почему я пошел дальше и...
3244 просмотров
schedule
09.09.2022
Как получить доступ к данным, связанным с элементом, при использовании делегирования событий
Я использую делегирование событий для n-количества строк, мой старый подход связывал каждую строку с событием, код выглядел примерно так:
function getDiv (data) {
var div = $("<div class='theDiv'>");
div.click(function () {...
107 просмотров
schedule
06.04.2023
Альтернатива .val(), которая получает текущее значение всех элементов в наборе совпадающих элементов.
У меня есть 3 элемента выбора, и я использую $(".select-elem select").val() , чтобы получить значение каждого элемента выбора в массиве, но он возвращает значение только первого элемента в наборе совпадающих элементов. Например, если пользователь...
922 просмотров
schedule
07.03.2024
Слушатель делегата события jQuery не срабатывает
Я создаю расширение Google Chrome и пытаюсь изменить для него код домашней страницы Twitter.
Мне нужно получать уведомления всякий раз, когда пользователь нажимает кнопку --- More , которая присутствует в каждом твите. В основном я использую...
64 просмотров
schedule
10.06.2022
Делегирование события JQuery пропускает Click
Я добавляю содержимое [кнопки и таблицы] в свой «контейнер», используя метод загрузки.
Однако динамический контент требует делегирования, и я считаю, что мой код для этого неверен, и я как-то сбиваю с толку родителей/детей. Когда я загружаю свою...
61 просмотров
schedule
14.10.2022
Удалить делегированный обработчик событий jQuery для определенного объекта
Я прикрепил делегированные обработчики событий к ряду элементов на странице с помощью одного селектора. Поскольку события запускаются для отдельных элементов, я хотел бы отключить только обработчик событий этого элемента, на основе некоторой...
3410 просмотров
schedule
28.10.2023
Чтобы делегировать typehead для динамически сгенерированного ввода
У меня есть html-таблица, которую я использую для ввода сведений о инвентаре. В этой таблице у меня есть поле ввода для имени продукта, к которому я привязываю событие начального ввода начальной загрузки. Но проблема в том, что для первого поля ввода...
556 просмотров
schedule
14.04.2023
Делегирование событий в jQuery — какой метод лучше?
В попытке написать лучший код и улучшить то, как я использую jQuery, я недавно кое-что читал. Один из новых советов, который я усвоил, — использование делегирования событий с помощью jQuery.
Во время чтения я обнаружил два «предполагаемых» разных...
101 просмотров
schedule
13.08.2022
Как остановить распространение события на глобальный прослушиватель в компоненте React?
У меня есть компонент, который должен прослушивать все события mousedown на моей странице.
document.addEventListener('mousedown', listener)
Теперь давайте предположим, что у меня есть кнопка в моем приложении React.
<button...
582 просмотров
schedule
15.10.2023
Взаимодействие смежных компонентов в Thermite
Сложная проверка шаблонов проектирования пользовательского интерфейса оказывается простой задачей:
Создайте универсальный компонент (в нашем случае кнопку)
использовать его в родительском компоненте
заставить дочерний компонент «приводить в...
98 просмотров
schedule
24.09.2022
Делегирование событий с входом на событие ввода
Можно ли как-то настроить делегирование события oninput для изменения текста div changeText ?
<div id="manyInputs">
<div>
<input type="text">
<div class="changeText">
</div>...
981 просмотров
schedule
19.04.2023
Делегирование событий с vanilla JS
На основе следующей разметки HTML:
<div class='list-container'>
<button class="btn">More details </button>
</div>
<div class="details">Lorem ipsum lorem ipsum lorem ipsum</div>
Я написал следующий код...
1224 просмотров
schedule
02.01.2023
Делегирование событий ванильного JavaScript при работе с веб-компонентами
В моем текущем проекте используются веб-компоненты (Custom Elements и Shadow DOM), которые позволяют мне инкапсулировать сложную логику и стили вне Light DOM.
К сожалению, сейчас у меня возникла загвоздка, когда мне нужно иметь возможность...
781 просмотров
schedule
14.02.2023
Как выполнить делегирование событий в объектно-ориентированном JS?
У меня проблемы с захватом динамически созданных элементов DOM и
Я не знаю, где должно происходить последующее делегирование события клика (то есть в моем основном файле .js или внутри класса пользовательского интерфейса).
Этот проект...
109 просмотров
schedule
23.08.2022
Как поддерживать stopPropagation в делегированных прослушивателях событий
Я просмотрел исходный код из jQuery, чтобы узнать, как они реализовали поддержку event.stopPropagation() в делегированных прослушивателях событий, то есть document.on(event, element...) , но, похоже, не могу заставить мою собственную ванильную...
165 просмотров
schedule
11.06.2023
Как получить идентификатор оболочки div в React, когда дочерние узлы являются целью события клика?
У меня есть нижний навигационный список элементов div, каждый из которых содержит значок svg. Когда пользователь щелкает значок, мне нужно данное свойство id, чтобы установить состояние, в котором затем отображается конкретный контент. Я на самом...
28 просмотров
schedule
13.10.2022
