Не работает event target

Не работает event.target

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает event.target
Проблемы с отображением есть ссылка, в которой по событию onclick=»deletefriend();».

Отличие this и event.target
Не очень понимаю какая разница между this и target, this передает ссылку на текущий объект с.

event.target в браузере IE
Доброго времени суток. Прошу помочь исправить один баг в ИЕ. Допустим в моей программе.

Target работает не так как нужно

Вы о чем? Ни одного класса элемента я не наблюдаю в вашем коде, ни в js ни в html.

Добавлено через 5 минут
Например

Потому что прежде чем лезть в js нужно понять основы html

Добавлено через 3 минуты
И как вы собираетесь кликать по дивам без width и height ?
Ну хотя бы текст в них какой-то написали — что бы было по чему кликать.

Добавлено через 29 минут
И тогда, если я правильно понял ваш замысел, можно сделать так:

Event.detail не работает в jquery
Функция при скролле возвращает 1 или -1, а именно свойство detail. Почему оно не определяется в.

event.returnValue is deprecated. Please use the standard event.preventDefault() instead
Выдаёт ошибку event.returnValue is deprecated. Please use the standard event.preventDefault().

Событие Event.COPY Event.PASTE Event.CUT
Привет я не знаю как написать код в котором текстовое поле реагировало бы на события.

Не работает target
find . -name «*.sh» -exec mv -t ./bin <> \; В freeBSD не работает, но в git bash работает. .

Источник

Почему не срабатывает условие (event.type и event.target)?

Изучаю JS, в данный момент DOM, знания небольшие.
После теории выполняю практические задания.
На двух задачах застряла, не понимаю, как сделать (задания на event.type и event.target).
Заранее благодарна за помощь в решении и объяснение, где я ошиблась.

Задача1
к двум событиям привязан один и тот же обработчик:
text

Допишите код функции func так, чтобы при клике на элемент этот элемент красился в зеленый цвет, а при двойном клике — в красный.

Но при нажатии одним кликом срабатывает сразу второе условие и кнопка становится желтой.
если закомментировать второе условие, тогда первое срабатывает и кнопка становится зеленой.
При этом в консоли при одном клике отображается «click», а при двойном «click», «click», «dblclick».

Задача2
Пусть есть список ul с тегами li:

Привяжите к тегу ul обработчик клика. В этом обработчике проверяйте с помощью свойства tagName, по какому тегу был клик. Если клик был по тегу li — добавьте в конец текста этого тега восклицательный знак. А если клик был по тегу ul — добавьте ему в конец еще один пункт списка.

мое решение:
Тег, на который был сделан клик, определяется верно, и в случае с ul все работает, а вот с li — не работает.
я исходила из того, что элементы li образуются массив и функция, в которой идет присвоение ‘!’ содержимому li, должна выполнятся для li, по которому сделан клик.

Источник

Получение атрибутов данных из тега опции HTML через event.target — использование набора данных или getAttribute не работает

У меня есть приложение React, в котором есть тег select с дочерними тегами option . Для каждого тега option я передаю некоторые дополнительные данные, которые я хочу связать с каждой опцией и в конечном итоге получить для передачи другим вспомогательным функциям.

Выполняя различные поисковые запросы в Интернете, я решил, что мне следует выполнить либо event.target.dataset.otherData , либо event.target.getAttribute(«data-otherData») , чтобы получить доступ к своим атрибутам данных. Однако ничего из этого не работает.

Кто-нибудь знает, в чем моя проблема?

РЕДАКТИРОВАТЬ: я создал скрипку, чтобы показать, что происходит: https://jsfiddle.net/mp8ns90o/

Мне было указано, что атрибуты данных должны быть в кебабе, а доступ к dataset должен быть в camelCase.

Итак, я попробовал: живу в США

И попытался получить его с помощью e.target.dataset.otherData и e.target.getAttribute(‘data-other-data’) , но он по-прежнему не работает.

2 ответа

Когда вы используете camelCase в JavaScript для поиска значения в dataset , он будет искать эти слова в kebabcase . I.E. data-other-data .

Чтобы получить атрибут данных через объект набора данных, получите свойство по части имени атрибута после data- (обратите внимание, что тире преобразуются в camelCase).

Самый простой вариант — исправить свое соглашение об именах в разметке, чтобы оно соответствовало.

Такое поведение единообразно во всем API браузера. Например, если вы хотите установить элементы border-width , вы используете форму camelCase element.style.borderWidth

Кроме того, вам нужно получить эту опцию вручную. Это потому, что целью вашего события всегда является выбор, а не сама опция.

Источник

Простое объяснение делегирования событий в JavaScript

Приветствую. Представляю вашему вниманию перевод статьи «A Simple Explanation of Event Delegation in JavaScript», опубликованной 14 июля 2020 года автором Dmitri Pavlutin

В данной статье Дмитрий Павлутин объясняет, на чём основан один из базовых паттернов работы с DOM-событиями.

1. Почему делегирование событий?

Давайте напишем скрипт, который при нажатии на HTML-кнопку, будет отправлять сообщение в консоль.

Чтобы срабатывало такое поведение, необходимо в JavaScript найти эту кнопку и с помощью метода addEventListener() прикрепить к ней обработчик события.

Данный способ позволяет начать отслеживать события на одном элементе. Например, на кнопке.

А что, если возникает необходимость отслеживать события на множестве кнопок? Вот пример одного из способов реализаций:

Посмотреть, как работает данный способ, можно в демонстрации CodeSandbox

Сначала делается выборка всех необходимых кнопок страницы, затем с помощью цикла for (const button of buttons) производится обход всех элементов этого списка, в котором к каждой кнопке прикрепляется обработчик события. Также, когда во время работы с документом на странице появляются новые кнопки, возникает необходимость вручную прикреплять обработчики событий для этих новых элементов.

Существует ли лучший способ?

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

Делегирование событий использует особенности работы «распространения событий». Чтобы понять, как работает делегирование, предлагаю сначала разобраться в принципе работы их распространения.

2. Распространение событий

Когда вы нажимаете на кнопку в следующей HTML-разметке:

На каком количестве элементов сработает событие click ? Без сомнений, событие клика получит сама кнопка. Но помимо неё, такое же событие получит и вся цепочка элементов, являющихся её предками (даже объекты document и window ).

Событие клика распространяется в 3 этапа:

1. Фаза захвата / погружения (capturing phase) – начиная с window , document и корневого элемента, событие погружается сверху вниз по DOM-дереву через предков целевого элемента, на котором произошло событие
2. Фаза цели (target phase) – срабатывание соыбытия на элементе, на который пользователь кликнул
3. Фаза всплытия (bubble phase) – наконец, событие всплывает по цепочке предков целевого элемента, пока не достигнет корневого элемента, а затем объектов document и window

Третий аргумент captureOrOptions метода addEventListener :

позволяет вам перехватывать события на разных этапах их распространения.

• Если аргумент captureOrOptions пропущен, имеет значение false или `< capture: false >, обработчик будет захватывать события на «Фазе цели» и «Фазе всплытия»
• Если же аргумент captureOrOptions имеет значение true или `< capture: true >, обработчик сработает уже на «Фазе захвата (погружения)»

В следующем примере обработчик перехватывает событие клика на элементе на «Фазе захвата»:

В демонстрации CodeSandbox, при нажатии на кнопку, в консоли можно увидеть, как распространяется событие.

Итак, как распространение события помогает перехватывать события из множества кнопок?

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

3. Делегирование событий

Давайте воспользуемся делегированием, чтобы отловить клики на несколько кнопок:

Откройте демонстрационный код и кликните на любую кнопку – вы увидите в консоли сообщение «Click!».

Идея делегирования событий роста. Вместо прикрепления обработчиков событий прямо к кнопкам, мы делегируем отслеживание этого события родительскому элементу

Использование делегирования событий требует 3 шагов:

Шаг 1. Определить общего родителя элементов для отслеживания событий
В примере ниже

Шаг 2. Прикрепить к родительскому элементу обработчик событий
document.getElementById(‘buttons’).addEventListener(‘click’, handler) прикрепляет обработчик событий к родителю кнопок. Этот обработчик также реагирует на нажатия на кнопки, так как события нажатий на кнопки всплывают по всем элементам-предкам (благодаря распространению событий).

Шаг 3. Использовать event.target для выбора целевого элемента
Когда кнопка нажата, функция-обработчик вызывается с аргументом: объектом event . Свойство event.target обращается к элементу, на котором произошло событие (в нашем примере этот элемент – кнопка):

Кстати, на элемент к которому прикреплён сработавший обработчик события, указывает event.currentTarget . В нашем примере event.currentTarget указывает на элемент

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

4. Резюме

Когда происходит событие нажатия на кнопку (или любое другое распространяющееся событие):

• Сначала событие опускается вниз от window , document , корневого элемента и через всех предков целевого элемента (фаза захвата / погружения)
• Событие происходит на целевом элемента (фаза цели)
• И наконец, событие всплывает вверх через элементы, являющиеся предками, пока не достигнет корневого элемента, document и window (фаза всплытия)

Механизм называется распространением события.

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

Для работы делегирования событий нужно 3 шага:

Источник

Продвинутая работа с объектом Event на JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Сейчас мы с вами разберем некоторые продвинутые вещи при работе с объектом Event, а именно: всплытие и перехват, а также делегирование событий.

Всплытие событий

Представьте себе, что у вас есть несколько вложенных друг в друга блоков:

Когда вы кликаете на самый внутренний блок, событие onclick возникает сначала в нем, а затем срабатывает в его родителе, в родителе его родителя и так далее, пока не дойдет то тега body и далее до тега html (затем до document и до window).

И это логично, ведь кликая на внутренний блок, вы одновременно кликаете на все внешние.

Давайте убедимся в этом на следующем примере: у нас есть 3 блока, к каждому из них привязано событие onclick:

Нажмите на самый внутренний красный блок — и вы увидите, как сначала сработает onclick красного блока, потом голубого, потом зеленого:

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

event.target

Пусть у нас есть два элемента: div и абзац p, лежащий внутри этого дива. Пусть onlick мы привязали в диву:

Когда мы кликаем на этот див, мы можем попасть по абзацу, а можем попасть в место, где этого абзаца нет.

Как такое может быть — посмотрите на следующем примере: зеленый цвет — это наш див, а голубой — наш абзац:

Если кликнуть в зеленую часть — мы кликнем именно по диву, а если кликнуть на голубую часть — клик произойдет сначала по абзацу, а потом уже по диву. Но так как onclick привязан именно к диву — мы в общем-то присутствие абзаца можем и не заметить.

Однако, иногда нам хотелось бы знать — клик произошел непосредственно по диву или по его потомку абзацу. В этом нам поможет объект Event и его свойство event.target — в нем хранится именно тот элемент, в котором произошел клик.

В следующем примере у нас есть div, внутри него лежит p, а внутри него — span.

Давайте привяжем событие onclick самому верхнему элементу (диву) и будем кликать на разные элементы: на div, на p, на span. С помощью event.target получим самый нижний элемент, в котором случилось событие и выведем его название с помощью tagName.

Если кликнуть, к примеру, на span — то событие отловит наш div (ведь именно к нему привязан onclick), но в event.target будет лежать именно span:

Покликайте по разным блокам — вы увидите результат:

Прекращение всплытия

Итак, вы уже знаете, что все события всплывают до самого верха (до тега html, а затем до document, а затем до window). Иногда есть нужда это всплытие остановить. Это может сделать любой элемент, через который всплывает событие. Для этого в коде элемента следует вызвать метод event.stopPropagation().

В следующем примере клик по красному блоку сработает на нем самом, затем на голубом блоке и все — голубой блок прекращает дальнейшее всплытие и зеленый блок уже никак не отреагирует:

Кликните на красный блок — вы увидите результат:

Погружение

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

Повесить обработчик события с учетом стадии перехвата можно только с помощью addEventListener. Для этого у него есть третий параметр: если он равен true — событие сработает на стадии перехвата, а если false — на стадии всплытия (это по умолчанию):

Стадию, на которой произошло событие можно определить с помощью свойства event.eventPhase. Оно может принимать следующие значения: 1 — стадия перехвата, 2 — стадия цели, 3 — стадия всплытия.

Вступление к делегированию

Представим себе ситуацию: пусть у нас есть ul с несколькими li. К каждой li привязано следующее событие: по нажатию на li ей в конец добавляется ‘!’.

Давайте реализуем описанное:

Понажимайте на li — вы увидите, как им в конец добавляется ‘!’:

• пункт 1
• пункт 2
• пункт 3
• пункт 4
• пункт 5

Пусть теперь у нас также есть кнопочка, по нажатию на которую в конец ul добавляется новая li с текстом ‘пункт’. Нас ждет сюрприз: привязанное событие не будет работать для новых li! Убедимся в этом:

Нажмите на кнопочку для добавления li, а затем на эту новую li — она не среагирует:

• пункт 1
• пункт 2
• пункт 3
• пункт 4
• пункт 5

Добавить li

Для решения проблемы можно в момент создания новой li повесить на нее функцию addSign через addEventListener. Давайте реализуем это:

Нажмите на кнопочку для добавления li, а затем на эту новую li — она среагирует:

• пункт 1
• пункт 2
• пункт 3
• пункт 4
• пункт 5

Добавить li

Существует и второй способ обойти проблему — делегирование событий. Давайте его разберем.

Делегирование событий

Суть делегирования в следующем: навесим событие не на каждую li, а на их родителя — на ul.

При этом работоспособность нашего скрипта должна сохраниться: по-прежнему при клике на li ей в конец будет добавляться ‘!’. Только событие в новом варианте будет навешано на ul:

Как мы это провернем: так как событие навешано на ul, то внутри функции мы можем поймать li с помощью event.target. Напомню, что такое event.target — это именно тот тег, в котором случился клик, в нашем случае это li.

Итак, вот решение нашей задачи через делегирование:

Результат выполнения кода:

• пункт 1
• пункт 2
• пункт 3
• пункт 4
• пункт 5

При этом наше решение будет работать автоматически даже для новых li, ведь событие навешено не на li, а на ul:

Нажмите на кнопочку для добавления li, а затем на эту новую li — она среагирует:

• пункт 1
• пункт 2
• пункт 3
• пункт 4
• пункт 5

Добавить li

Наш код рабочий, однако не без недостатков. Давайте разберем эти недостатки и напишем более универсальное решение.

Универсальное делегирование событий

Недостаток нашего кода проявится в том случае, когда внутри li будут какие-то вложенные теги. В нашем случае пусть это будут теги i:

В этом случае нажатие на i приведет к добавлению восклицательного знака в конец тега i, а не тега li, как мы хотели бы (если нажать на li вне курсива — то все будет ок):

Нажмите на курсив — вы увидите как ‘!’ добавится ему в конец (нажатие вне курсива будет работать нормально):

• пункт курсив 1
• пункт курсив 2
• пункт курсив 3
• пункт курсив 4
• пункт курсив 5

Проблема исправляется следующим образом (описанный способ не единственный, но самый простой): с помощью метода closest найдем ближайшую li, котоорая является родителем для event.target вот так: event.target.closest(‘li’).

Как это работает: если клик был на i, то в event.target лежит этот i, а в event.target.closest(‘li’) — наша li, для которой должно сработать событие.

Если же клик был на самой li, то и в event.target, и в event.target.closest(‘li’) будет лежать наша li.

Результат выполнения кода:

• пункт курсив 1
• пункт курсив 2
• пункт курсив 3
• пункт курсив 4
• пункт курсив 5

Не важно, какая глубина вложенности: тег i может лежать в теге b, а тот в теге span и только потом в li — это не имеет значения: конструкция event.target.closest(‘li’) найдет родителя из любого уровня вложенности.

Дополнительные материалы

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

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Источник