Этот обработчик для сработает, если вы кликните по любому из вложенных тегов, будь то или :
Если вы кликните на EM, сработает обработчик на DIV
Вам не кажется это странным? Почему же сработал обработчик на , если клик произошёл на ?
Всплытие
Принцип всплытия очень простой.
Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.
Например, есть 3 вложенных элемента FORM > DIV > P с обработчиком на каждом:
body *
Клик по внутреннему
вызовет обработчик onclick :
Сначала на самом
.
Потом на внешнем .
Затем на внешнем .
И так далее вверх по цепочке до самого document .
Поэтому если кликнуть на
, то мы увидим три оповещения: p → div → form .
Этот процесс называется «всплытием», потому что события «всплывают» от внутреннего элемента вверх через родителей подобно тому, как всплывает пузырёк воздуха в воде.
Почти все события всплывают.
Ключевое слово в этой фразе – «почти».
Например, событие focus не всплывает. В дальнейшем мы увидим и другие примеры. Однако, стоит понимать, что это скорее исключение, чем правило, всё-таки большинство событий всплывают.
event.target
Всегда можно узнать, на каком конкретно элементе произошло событие.
Самый глубокий элемент, который вызывает событие, называется целевым элементом, и он доступен через event.target .
Отличия от this (= event.currentTarget ):
event.target – это «целевой» элемент, на котором произошло событие, в процессе всплытия он неизменен.
this – это «текущий» элемент, до которого дошло всплытие, на нём сейчас выполняется обработчик.
Например, если стоит только один обработчик form.onclick , то он «поймает» все клики внутри формы. Где бы ни был клик внутри – он всплывёт до элемента , на котором сработает обработчик.
При этом внутри обработчика form.onclick :
this (= event.currentTarget ) всегда будет элемент , так как обработчик сработал на ней.
event.target будет содержать ссылку на конкретный элемент внутри формы, на котором произошёл клик.
example.css
form.onclick = function(event) < event.target.style.backgroundColor = 'yellow'; // браузеру нужно некоторое время, чтобы зарисовать всё жёлтым setTimeout(() =>< alert("target = " + event.target.tagName + ", this=" + this.tagName); event.target.style.backgroundColor = '' >, 0); >;
Клик покажет оба: и event.target, и this для сравнения:
Возможна и ситуация, когда event.target и this – один и тот же элемент, например, если клик был непосредственно на самом элементе , а не на его подэлементе.
Прекращение всплытия
Всплытие идёт с «целевого» элемента прямо наверх. По умолчанию событие будет всплывать до элемента , а затем до объекта document , а иногда даже до window , вызывая все обработчики на своём пути.
Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.
Для этого нужно вызвать метод event.stopPropagation() .
Например, здесь при клике на кнопку обработчик body.onclick не сработает:
event.stopImmediatePropagation()
Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены.
То есть, event.stopPropagation() препятствует продвижению события дальше, но на текущем элементе все обработчики будут вызваны.
Для того, чтобы полностью остановить обработку, существует метод event.stopImmediatePropagation() . Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.
Не прекращайте всплытие без необходимости!
Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.
Зачастую прекращение всплытия через event.stopPropagation() имеет свои подводные камни, которые со временем могут стать проблемами.
Мы делаем вложенное меню. Каждое подменю обрабатывает клики на своих элементах и делает для них stopPropagation , чтобы не срабатывало внешнее меню.
Позже мы решили отслеживать все клики в окне для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Некоторые системы аналитики так делают. Обычно используют document.addEventListener(‘click’…) , чтобы отлавливать все клики.
Наша аналитика не будет работать над областью, где клики прекращаются stopPropagation . Увы, получилась «мёртвая зона».
Зачастую нет никакой необходимости прекращать всплытие. Задача, которая, казалось бы, требует этого, может быть решена иначе. Например, с помощью создания своего уникального события, о том, как это делать, мы поговорим позже. Также мы можем записывать какую-то служебную информацию в объект event в одном обработчике, а читать в другом, таким образом мы можем сообщить обработчикам на родительских элементах информацию о том, что событие уже было как-то обработано.
Погружение
Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»). Она очень редко используется в реальном коде, однако тоже может быть полезной.
Стандарт DOM Events описывает 3 фазы прохода события:
Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
Фаза всплытия (bubbling stage) – событие начинает всплывать.
Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.
Обработчики, добавленные через on -свойство или через HTML-атрибуты, или через addEventListener(event, handler) с двумя аргументами, ничего не знают о фазе погружения, а работают только на 2-ой и 3-ей фазах.
Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент capture вот так:
elem.addEventListener(. ) // или просто "true", как сокращение для elem.addEventListener(. true)
Существуют два варианта значений опции capture :
Если аргумент false (по умолчанию), то событие будет поймано при всплытии.
Если аргумент true , то событие будет перехвачено при погружении.
Обратите внимание, что хоть и формально существует 3 фазы, 2-ую фазу («фазу цели»: событие достигло элемента) нельзя обработать отдельно, при её достижении вызываются все обработчики: и на всплытие, и на погружение.
Давайте посмотрим и всплытие и погружение в действии:
body *
Здесь обработчики навешиваются на каждый элемент в документе, чтобы увидеть в каком порядке они вызываются по мере прохода события.
Если вы кликните по
, то последовательность следующая:
HTML → BODY → FORM → DIV (фаза погружения, первый обработчик)
P (фаза цели, срабатывают обработчики, установленные и на погружение и на всплытие, так что выведется два раза)
DIV → FORM → BODY → HTML (фаза всплытия, второй обработчик)
Существует свойство event.eventPhase , содержащее номер фазы, на которой событие было поймано. Но оно используется редко, мы обычно и так знаем об этом в обработчике.
Чтобы убрать обработчик removeEventListener , нужна та же фаза
Если мы добавили обработчик вот так addEventListener(. true) , то мы должны передать то же значение аргумента capture в removeEventListener(. true) , когда снимаем обработчик.
На каждой фазе разные обработчики на одном элементе срабатывают в порядке назначения
Если у нас несколько обработчиков одного события, назначенных addEventListener на один элемент, в рамках одной фазы, то их порядок срабатывания – тот же, в котором они установлены:
elem.addEventListener("click", e => alert(1)); // всегда сработает перед следующим elem.addEventListener("click", e => alert(2));
Итого
При наступлении события – самый глубоко вложенный элемент, на котором оно произошло, помечается как «целевой» ( event.target ).
Затем событие сначала двигается вниз от корня документа к event.target , по пути вызывая обработчики, поставленные через addEventListener(. true) , где true – это сокращение для .
Далее обработчики вызываются на целевом элементе.
Далее событие двигается от event.target вверх к корню документа, по пути вызывая обработчики, поставленные через on и addEventListener без третьего аргумента или с третьим аргументом равным false .
Каждый обработчик имеет доступ к свойствам события event :
event.target – самый глубокий элемент, на котором произошло событие.
event.currentTarget (= this ) – элемент, на котором в данный момент сработал обработчик (тот, на котором «висит» конкретный обработчик)
event.eventPhase – на какой фазе он сработал (погружение=1, фаза цели=2, всплытие=3).
Любой обработчик может остановить событие вызовом event.stopPropagation() , но делать это не рекомендуется, так как в дальнейшем это событие может понадобиться, иногда для самых неожиданных вещей.
В современной разработке стадия погружения используется очень редко, обычно события обрабатываются во время всплытия. И в этом есть логика.
В реальном мире, когда происходит чрезвычайная ситуация, местные службы реагируют первыми. Они знают лучше всех местность, в которой это произошло, и другие детали. Вышестоящие инстанции подключаются уже после этого и при необходимости.
Всплытие и погружение являются основой для «делегирования событий» – очень мощного приёма обработки событий. Его мы изучим в следующей главе.
Плохие привычки программистов
Наши привычки постоянно развиваются и меняются. Изменяется стиль кодирования, подход к написанию кода в целом. Обычно это хорошо, но иногда этот процесс минует некоторые плохие привычки и они надолго остаются с нами. Я хотел бы поделиться размышлениями о некоторых «не очень хороших» привычках, которые я наблюдал в себе и в других людях на протяжении многих лет. Некоторые даже могут быть не похожи на плохие…
Бросаем неиспользуемый код
Иногда мы решаем переписать какую-то часть нерабочего кода или попросту хотим его немного улучшить (многие из нас стремятся к перфекционизму). Старый код комментируется и вместо него пишется новый. Это отлично, но после того, как работа закончена, старый код необходимо удалить! Если этого не сделать, количество таких закомментированных участков начнет увеличиваться, и со временем они станут отвлекать внимание от других важных частей.
К примеру, однажды ко мне обратился один из клиентов с просьбой добавить некоторые новые возможности в его существующем проекте. Я скачал код и обнаружил, что в нем закомментированных участков больше, чем реального кода. Это ужасно отвлекает и делает код менее читаемым.
Неиспользуемые функции в коде ваших приложений — это еще одна распространенная проблема. Когда-то в них была необходимость, но с развитием проекта они перестали вызываться. Привлекая нового разработчика к проекту будьте уверены — он потратит время на их анализ.
У вас же есть система контроля версий для хранения старого кода, не бойтесь его удалять! Сделайте это прямо сейчас!
Чрезмерно обобщаем
Многие программисты пытаются писать код, который будет способен обработать все, что вы ему скормите, и начинают применять этот подход в каждом проекте. Я создал много компонентов, фреймворков, свой игровой 3D-движок, чтобы достаточно разбираться в написании абстрактного кода. Для 90% приложений в таком подходе нет необходимости.
Мы думаем, что будем использовать наш код в дальнейшем, поэтому пытаемся сделать его максимально обобщенным и абстрактным. Вы разрабатываете свой компонент? Как насчет того, чтобы убедиться в том, что он обрабатывает 10 ситуаций, даже если нам необходимо всего 2 в текущем приложении?
У меня для вас плохие новости. Едва ли вы будете использовать свой код в других проектах. Вы тратите свое время или время вашего клиента (за которое он платит), создавая ненужные в проекте вещи вместо того, чтобы сфокусироваться на том, что действительно важно. Если вы используете ваш класс во втором (или даже в третьем) проекте, то вероятно вам стоит выделить его в отдельную сущность. Вы ведь наверняка в этом убедились на реальных проектах.
Зацикливаемся на ООП
Хочу отметить: я большой фанат ООП, я люблю этот подход, так как он легок для понимания и сопровождения.
Но некоторые люди склонны создавать себе проблемы, излишне увлекаясь декомпозицией (это похоже на предыдущий пункт о чрезмерном обобщении). Проект не должен увеличиваться пропорционально количеству классов, которое вы можете придумать. Если вы начали писать класс, который состоит из одной единственной функции, остановитесь и подумайте — действительно ли это так необходимо?
Чрезмерное обобщение и разбиение на классы может иметь в дальнейшем очень плохие последствия. Код, разбитый по нескольким классам, будет сложнее оптимизировать. Могут возникнуть сложности с добавлением новых функций… Всегда думайте о связях между вашими классами, действительно ли есть необходимость выносить этот код в отдельный класс? Может это не имеет большого смысла?
«Я могу реализовать это лучше»
У каждого из нас присутствует огромное эго. Мы думаем, что мы можем написать все, что угодно и наверняка лучше, чем кто-либо другой. Так вот, оставьте ваше эго дома!
Это касается практически всего, что мы делаем. Если возникает необходимость поработать над чужим проектом, достаточно беглого взгляда на код, чтобы подумать «он ужасен! я могу сделать это нааамного лучше!». Анализируя какой-то компонент для интеграции, вы можете решить «будет намного лучше, если я напишу это с нуля».
И снова у меня для вас плохая новость: практически любой код может выглядеть как полная ерунда для кого-то другого, ведь у каждого разные подходы и опыт. Разработчик, который месяцами систематически работал над проектом, действительно знает, что заслуживает внимания. Потенциально вы не можете этого оценить всего лишь окинув беглым взглядом его код. На самом деле есть много примеров, когда код действительно дерьмовый, но это становится очевидным сразу (код из реального проекта, который меня попросили улучшить, имена переменных изменены):
- (void)dealloc
Почти всегда можно найти хорошие компоненты, позволяющие решить поставленные задачи, вместо того, чтобы писать свои собственные. И всегда лучше использовать то, что уже оттестировано сообществом, вместо того, чтобы создавать это с нуля.
Просто прикиньте: сколько понадобится времени для того, чтобы написать код, затем убедиться, что все работает так, как задумано, и после всего осознать, что вы недостаточно хорошо что-то оттестировали. Разработка с нуля полезна только в целях обучения, но никак не в проекте, который надо сдавать через 2 недели.
А если вы не верите, что можете писать плохой код, просто откройте какой-то проект, который написали пару лет назад. Уверен, что вам этот код покажется ПЛОХИМ.
Боимся вспомогательных инструментов (писать меньше кода)
Люди противятся изменениям. У нас есть привычки, которые мы считаем правильными и необходимы определенные усилия, чтобы выйти из зоны комфорта и попробовать что-то новое.
Многие программисты, которых я встречал, считают, что использовать Interface Builder — плохо. После первого знакомства с IB, который мне откровенно не понравился, я в течение 2х лет создавал элементы UI через код. Однако затем я преодолел свою зону комфорта и дал ему второй шанс. За это время Interface Builder был существенно улучшен, появились приятные вещи по типу Storyboard, и он стал превращаться во все более полезный инструмент. В итоге IB оказался мне полезным в определенных случаях и не только для простых интерфейсов — с его помощью можно делать довольно продвинутые вещи.
Будьте прагматичны и выбирайте наиболее подходящий инструмент для своей работы. Иногда лучше реализовывать интерфейс через код (например свой UITableViewCell для быстрой отрисовки), но в большинстве случаев Interface Builder прекрасно решает поставленные задачи.
Ну и конце концов, чем меньше кода вы напишете, тем меньше багов придется отлавливать.
Заключение
Наверняка существует еще много плохих привычек, о которых вам известно (можно даже написать об этом книгу). Приведенные здесь примеры могут быть не самыми очевидными, но я сталкивался с ними довольно часто, работая с разными людьми. И самое главное — если кто-то совершает ошибки, то это вовсе не значит, что он плохой программист, ведь у каждого из нас есть плохие привычки и главная задача состоит в том, чтобы избавиться от них. Посмотрите на код, который вы написали 3 года назад и скажите, что он вам нравится сейчас.
программирование
разработка
best practices
плохой код
Веб-разработка
Программирование
Понимаем сленг программистов: мини-словарь для начинающих разработчиков
Начинающие разработчики не сразу понимают старших товарищей. Фразы вроде «я апишку свитчнул» или «заимпорти другую либу» звучат для новичков как лекция по математическому анализу для первобытного человека. Поэтому мы решили сделать небольшой словарь профессионального сленга программистов.
Слова и фразы в словаре отсортированы по алфавиту. Кстати, словарь можно дополнять. Пишите в комментариях термины, с которыми вы сталкивались на работе.
Бесплатные курсы по программированию в Хекслете
Освойте азы современных языков программирования
Изучите работу с Git и командной строкой
Выберите себе профессию или улучшите навыки
А
Адаптив — адаптивный дизайн, адаптация интерфейса к использованию на разных экранах.
Аджайл — от англ. Agile. Общий термин, который описывает ценности и принципы гибкой разработки программного обеспечения, а также практические подходы к разработке. Понятие Agile стало популярным после публикации Манифеста гибкой разработки программного обеспечения в 2001 году.
Айдишник — id, идентификатор.
Альфа — этап разработки программного обеспечения, на котором разработчики добавляют в программу новые функции, а тестировщики испытывают программу. Это внутренний или непубличный этап.
Апишка — API, программный интерфейс приложения или интерфейс прикладного программирования.
Апрув, апрувнуть — от англ. Approve. Одобрение, одобрить, утвердить.
Аутсорс — аутсорсинг, передача компанией части операционной деятельности другой компании.
Б
Баг — от англ. Bug — жучок, клоп. Ошибка в программе.
Бахнуть — что-то быстро сделать, изменить или дополнить функциональность приложения.
Бета — бета-версия, приложение на стадии публичного тестирования.
Бот — сокращение от «робот». Ботом называют программу, которая автоматизирует интерфейс. Пример — автоответчик в чате.
Бэкап, бэкапить — резервная копия или процесс создания резервной копии приложения.
Бэкенд — от англ. Back-end. Программно-аппаратная или серверная часть приложения.
Бэклог — от англ. Backlog. Перечень рабочих задач команды разработчиков, упорядоченный по приотритету.
В
Ворнинг — от англ. Warning — предупреждение. Предупреждающее сообщение в интерфейсе.
Войтивайти — шуточное выражение, обозначает процесс переквалификации далекого от IT-сферы специалиста в разработчика.
Выкатить — сделать доступным для пользователей. Например, «выкатили новую версию сайта» значит сделали новую версию сайта доступной для пользователей.
Выпадашка — выпадающее меню, то же, что и «дропдаун».
Г
Галера — компания, в которой платят низкие зарплаты и не ценят разработчиков.
Гит — система контроля версий Git или сервис GitHub.
Г****окод — плохой, некачественный код. Объяснение термина есть в статье нашего студента.
Градиент — плавный переход из одного цвета в другой.
Грумить — от англ. Grooming. Приводить в порядок, «причесывать».
Д
Движок — в веб-разработке так называют системы управления контентом.
Дебажить — устранять ошибки, баги.
Деплой, деплоить — развёртывание, публикация рабочей версии приложения. Пример: задеплоить сайт — перенести сайт с тестового на рабочий сервер, сделать его доступным для пользователей.
Джун, джуниор — от англ. Junior. Младший разработчик. Специалист без опыта или с минимальным опытом работы.
Дезигнер — презрительно-снисходительное название дизайнера.
Докеризировать — завернуть приложение в докер (платформу для разработки, доставки и запуска контейнерных приложений).
Драй — от англ. DRY, don’t repeat yourself. Принцип программирования, предлагающий избегать повторений кода.
Дропдаун — выпадающее меню, то же, что и «выпадашка».
Дропнуть — от англ. Drop. Удалить, отключить, сбросить или обнулить что-либо.
Ж
Жаба — язык программирования Java.
Жабаскрипт — язык программирования JavaScript.
З
Залить — загрузить. Например, «залить файлы на сервер».
Запилить — сделать что-то, добавить какую-то функциональность.
Змея — язык программирования Python.
И
Исходник — файлы, в которых находится исходный код приложения, или сам исходный код.
Итерация — повторение. «Мы сделали несколько итераций» — мы повторили шаг несколько раз.
Бесплатные курсы по программированию в Хекслете
Освойте азы современных языков программирования
Изучите работу с Git и командной строкой
Выберите себе профессию или улучшите навыки
К
Колл — от англ. Call. Созвон, онлайн-конференция, онлайн-совещание.
Коммит, коммитить — от англ. To commit — совершать. В контексте работы над приложением — сохранять код в репозитории.
Копипаста — от англ. Copy-Paste. Скопированный откуда-то код.
Костыль — код, который нужен, чтобы исправить несовершенство ранее написанного кода.
Л
Легаси — от англ. Legacy. Морально устаревший код, который не обновляется, но используется. Или код, который разработчик получил по наследству от предыдущих разработчиков.
Либа — от англ. Library — библиотека. Речь идет о библиотеках кода, например, React.
Линтер — общее нарицательное название программ, которые анализируют код и предупреждают разработчика об ошибках.
Лист — от англ. List — список.
Локалка — локальный. Например, локальный сервер или сеть.
М
Мидл — от англ. Middle — средний. Уровень разработчика, следующий за джуниором. Опыт и уровень знаний миддла позволяет ему самостоятельно решать серьезные задачи.
Мёржить — от англ. Merge, сливать. Речь идет об объединении или слиянии веток кода.
Меншить — от англ. Mention — упоминание. Упоминанать в чатах или соцсетях. «Менши меня, когда будет готово» значит «упомяни меня, когда будет готово».
Н
Навбар — навигационный блок на сайте или в интерфейсе программы.
Накатить — внести изменения, задеплоить новую версию приложения. Противоположное термину «откатить».
О
Опенсорс, опен-сорс — от англ. Open Source. Программное обеспечение с открытым исходным кодом.
Откатить — удалить изменения, вернуть предыдущую версию приложения. Противоположное термину «накатить».
Ось — операционная система.
П
Падаван — ироничное название стажера или джуниора.
Пилот — пробная (пилотная) версия продукта.
Питон — язык программирования Python.
Подвал — то же, что и «футер». Элемент структуры страницы, который находится в нижней части и содержит служебную информацию — контакты, ссылки на соцсети, публичная оферта и т. д.
Поплыла вёрстка — некорректное отображение страницы в браузере.
Продакшн или продакшен (продакшн-код) — обозначение кода для рабочей версии приложения.
Пушить — использовать команду push, публиковать что-то.
Пэхапэ — язык программирования PHP, то же, что и «пыха».
Пыха — язык программирования PHP, то же, что и «пэхапэ».
Р
Рекурсия — описание процесса с помощью самого процесса. Например, выражение «рекурсивный вызов функции» описывает ситуацию, в которой функция вызывает сама себя.
Релиз — программное обеспечение на стадии публичного использования. Стабильная версия программы, которая прошла тестирование.
Релокация — перевод сотрудника или бизнеса в другое место внутри страны или за границу.
Репа — репозиторий, хранилище данных. Например, код программы можно хранить в репозитории на GitHub.
Ридми — файл Readme, в котором содержится информация о программе.
Ругаться, например, линтер ругается — сообщения об ошибках в коде, работе сервиса и так далее.
С
Сабж — от английского Subject — тема, предмет. «По сабжу» — по теме обсуждения.
Свитчнуть, свичнуть — переключить. От английского switch.
Сетка — модульная сетка, используется для дизайна и верстки страниц.
Сеньор, синьор — от англ. Senior — старший разработчик.
Сорец (Сорцы) — от англ. Source. Исходный код.
Стек — изначально абстрактный тип данных. В разговорной речи используется для обозначения списка технологий, которые использует разработчик или компания. Пример: «Наш стек — HTML/CSS, JavaScript, React».
Софт — от англ. Software — программное обеспечение.
Софт-скиллы — от англ. Soft skills — знания и качества специалиста, прямо не связанные с профессиональной деятельностью. Примеры: коммуникабельность, проактивность.
Спринт — короткий промежуток времени (до 4 недель), в течение которого scrum-команда выполняет определенный объем работы.
Читайте также: Как джуну найти работу и где лучше начинать карьеру в IT: советы от Хекслета
Т
Таска — от англ. Task. Задание, задача.
Темплейт — от английского Template — шаблон.
Тестировщик — специалист по тестированию программного обеспечения.
Тимлид — от английского Team Lead — руководитель команды. Координатор группы программистов.
У
Убить — удалить что-то. Например, «убить профиль» означает удалить профиль.
Ф
Фидбек — от англ. Feedback — обратная связь.
Фиксить, пофиксить — от англ. Fix. Чинить, починить, исправить.
Фича — функция, возможность. От англ. Feature.
Фреймворк — от англ. Framework — каркас. Инструмент разработки, набор типовых шаблонных решений, упрощающих работу программиста. Примеры: Laravel, Bootstrap.
Фронтенд — от англ. Front-end — клиентская часть приложения.
Х
Хатэмээль, хатээмэль — HTML, язык гипертекстовой разметки.
Хардкодить — статически прописывать в коде данные, которые должны вычисляться динамически. Плохая практика, антипаттерн в программировании.
Хацкер, кулхацкер — ироничное название начинающего специалиста, который считает себя опытным программистом. От английского Hacker и Cool Hacker.
Хедер, хэдер — элемент структуры веб-страницы, находится в верхней части и содержит логотип, меню, служебную информацию.
Хотфикс — от англ. Hotfix. Срочное исправление критических ошибок, уязвимостей или недоработок в программе.
Ц
Цэмээс, цээмэс — от англ. CMS — Content Management System, система управления контентом.
Чекать, чекнуть, прочекать — от англ. Check. Проверять, проверить.
Ю
Юзать — от английского To use — использовать.
Я
Ява — язык программирования Java.
Яваскрипт — язык программирования JavaScript.
ЯП — язык программирования.
Бесплатные курсы по программированию в Хекслете
Освойте азы современных языков программирования
Изучите работу с Git и командной строкой
Выберите себе профессию или улучшите навыки
Что такое слушатель событий?
Слушатель событий – это функция в JavaScript, которая ожидает событие и отвечает на него. JavaScript – это язык программирования, который используют разработчики для создания интерактивных веб-страниц. С помощью функции слушателя событий JavaScript можно создавать собственные реакции на такие события, как щелчки мыши, нажатия на клавиатуру и изменение размера окна. Парадигма программирования, предполагающая ожидание событий в реальном времени и реагирование на них, называется обработкой событий.
В чем заключается синтаксис функции слушателя событий?
Функция слушателя событий обладает теми же характеристиками, что и другие функции JavaScript. При активации эта функция выполняет необходимые действия для обработки события. Например, благодаря функции слушателя событий можно изменять отображаемый текст, собирать информацию из регистрационных форм или хранить данные в базах данных.
Синтаксис слушателя событий
Функция слушателя событий соответствует правильному синтаксису JavaScript, как в следующем примере.
В этом примере показана функция слушателя событий RespondMouseClick. Обычно название функции пишется так, чтобы оно соответствовало назначению слушателя событий. В функции вы пишете коды для выполнения определенных действий при наступлении события. В этом примере функция добавляет текст MouseClick happened к HTML-элементу textdisplay1.
Синтаксис обработчика событий
В качестве альтернативы вы можете использовать функцию обработчика событий для ответа на активированное событие, как показано в следующем примере.
if (event.type === «fullscreenchange»)
console.log (“full screen toggle”);
console.log (“full screen error”);
Таким образом, вы можете управлять несколькими типами событий от определенного элемента с помощью одной функции.
Например, вы можете зарегистрировать слушатель событий для обработки всех типов событий блокчейна в приложениях, основанных на событиях. Дополнительные сведения см. в статье о создании приложения, основанного на событиях, с помощью Управляемого блокчейна Amazon.
Как добавить слушатель событий?
Слушатель событий будет активирован только после добавления его в соответствующий элемент JavaScript. Для этого вы можете использовать следующий синтаксис:
Например, разработчики могут вызвать следующую функцию, чтобы привязать слушатель событий нажатия к элементу кнопки.
Можно также добавить несколько слушателей событий к определенному объекту события, не перезаписывая существующие обработчики событий.
Например, Amazon Web Services (AWS) позволяет разработчикам объединять несколько обратных вызовов для объекта AWS.Request. Дополнительные сведения см. в статье о том, как использовать слушатель событий объекта запросов на AWS.
Параметры добавления событий
Ниже приведено объяснение параметров из предыдущего синтаксиса.
Параметр event – это любое допустимое событие JavaScript, такое как щелчок, изменение, наведение курсора мыши, нажатие клавиши и загрузка.
Параметр listener – это обратный вызов события или функция JavaScript, созданная для ответа на определенные события.
Параметр useCapture – это дополнительный параметр, указывающий режим распространения событий. Он принимает логические значения, где true активирует перехват, а false – всплытие. По умолчанию для этого параметра установлено значение false.
Параметр options состоит из нескольких дополнительных значений, включая сигналы режима перехвата и отклонения, которые отражают поведение слушателя.
Как удалить слушатель событий?
Слушатели событий остаются активными до тех пор, пока вы не удалите их из связанных элементов JavaScript. Для этого можно использовать следующий синтаксис.
Параметры удаления слушателя событий аналогичны параметрам, которые вы используете для его добавления. При удалении слушателя событий необходимо указать те же параметры типа, слушателя и useCapture. Если этого не сделать, слушатель событий будет оставаться активным и продолжать срабатывать для будущих событий.
Например, вы можете добавить событие с помощью следующего кода.
Однако при применении следующего кода не удается удалить слушателя событий. Это связано с тем, что значение useCapture отличается от значения, зарегистрированного в объекте кнопки.
Как работают функции вложенного слушателя событий?
Вложенные слушатели событий – это обработчики событий, добавленные к элементам HTML на разных иерархических уровнях.
В следующем примере HTML документ является владельцем родительского элемента, а родительский элемент – дочернего.
В сложных веб-приложениях может быть несколько родительских и дочерних слоев с соответствующими функциями слушателей событий. Когда происходит определенное событие, слушатели событий запускаются на разных уровнях в определенном порядке. Например, при нажатии на дочернюю кнопку событие будет распространяться на все обработчики, которые фиксируют нажатие мыши.
События могут распространяться в двух режимах: всплытия и перехвата.
Всплытие события
Всплытие – это режим обработки событий JavaScript по умолчанию. Он распространяет событие от самого внутреннего слоя к самому внешнему.
Например, пользователь может навести курсор на текстовое поле в дочернем разделе. Затем приложение может передать событие в следующем порядке:
Слушатель событий в дочернем объекте обрабатывает событие наведения мыши.
Затем родительский слушатель событий обрабатывает событие и передает управление слушателю событий документа.
Чтобы настроить всплытие событий, используйте следующий синтаксис:
Перехват событий – это специальный режим обработки событий в JavaScript, при котором событие распространяется внутрь из самого внешнего слоя. Как только событие достигает целевого элемента во внутреннем слое, режим обработки событий переходит в режим всплытия. Затем в результате всплытия событие распространяется наружу до самого верхнего слоя.
Например, пользователь может нажать на дочернюю кнопку и запустить следующую последовательность действий:
Событие щелчка мыши обрабатывает слушатель событий документа, а затем – родительский обработчик событий.
Событие достигает целевого элемента – кнопки. Событие обрабатывает слушатель событий кнопки.
Обработка событий переключается из режима записи в режим всплытия.
То же событие щелчка мыши запускает обработчик события на родительском объекте, а затем переходит к документу.
Как выбрать между всплытием и перехватом
Всплытие и перехват позволяют по-разному управлять событиями. Режим всплытия используется редко, поскольку перехвата достаточно для обработки большинства событий в приложениях.
Выбирая между всплытием и перехватом, следует учитывать процесс распространения событий и его соответствие логике программирования вашего приложения.
Например, рассмотрим родительскую форму, состоящую из двух дочерних элементов. Первый элемент требует немедленного обновления при возникновении события во втором элементе. В этом случае вам следует использовать режим перехвата. Благодаря ему родительский слушатель событий обрабатывает событие и обновляет первый элемент. Затем он передает управление слушателю событий на втором дочернем элементе.
Как остановить распространение событий в функциях вложенных слушателей событий?
События передаются до тех пор, пока не достигнут конечного адресата в виде вложенного слушателя. Чтобы предотвратить дальнейшее распространение события, необходимо использовать определенные методы.
Следующий метод останавливает событие в слушателе событий.
Например, если вы вызовете StopPropagation дочерней кнопкой, событие щелчка мыши не распространится на родительский уровень и уровень документа. Таким образом, слушатели мероприятий более высокого уровня не будут активированы.
Остановить распространение всех событий
StopPropagation останавливает распространение событий только текущего типа. Если в объекте зарегистрированы разные типы слушателей событий, они все равно срабатывают, несмотря на вызов команды StopPropagation.
Чтобы остановить все события, связанные с определенным объектом, вы можете использовать метод StopImmediatePropagation следующим образом.
Когда один слушатель событий вызывает StopImmediatePropagation, другие слушатели, связанные с объектом, не запускаются.
Как AWS обеспечивает соответствие вашим требованиям к JavaScript?
Amazon Web Services (AWS) предлагает SDK AWS для JavaScript, чтобы вы могли легко использовать сервисы в своих приложениях с помощью библиотек и API.
SDK можно использовать для разработки серверных, веб- и мобильных веб-приложений. SDK поддерживает среды выполнения JavaScript, Node.JS и React Native, а также их сочетания. Благодаря этому разработчики могут запускать один и тот же пакет сервисов клиента на разных платформах.
Ниже приведены другие преимущества использования SDK.
SDK написан на языке TypeScript. Таким образом обеспечиваются такие преимущества, как статическая проверка типов и поддержка классов и модулей.
В SDK есть стек промежуточного программного обеспечения, который позволяет вводить настраиваемые действия.
SDK обладает модульной архитектурой. Благодаря этому вы можете использовать только необходимые пакеты для оптимизации производительности приложения.
Начните работу с приложениями JavaScript, зарегистрировав аккаунт AWS сегодня.
