События в js: Введение в браузерные события

Разное
28 Мар, 2021
0

Содержание

события и колбэки — Документация docs.cs-cart.ru 4.3.x

switch

'ce.switch_[ELM_ID]', [flag]

Запускается при скрытии/раскрытии элемента с помощью микроформата cm-combination

flag — флаг состояния элемента (открыт/скрыт)
[ELM_ID] — идентификатор элемента (html свойство id)

picker_js_action

'ce.picker_js_action_[ELM_ID]', [elm]

Запускается при выборе элемента в ajax_select_object.tpl

formpre

'ce.formpre_[FORM_NAME]', [form, clicked_elm]

Запускается при отправке формы, перед проверкой элементов.

form — объект, указывающий на форму, которая отправляется
clicked_elm — объект, указывающий на элемент, который вызвал отправку формы
[FORM_NAME] — имя формы

formpost

'ce.formpost_[FORM_NAME]', [form, clicked_elm]

Запускается при отправке формы, после проверки элементов.

form — объект, указывающий на форму, которая отправляется
clicked_elm — объект, указывающий на элемент, который вызвал отправку формы

[FORM_NAME] — имя формы

formajaxpost

'ce. formajaxpost_[FORM_NAME]', [response_data, params, response_text]

Запускается после отправке формы аяксом.

response_data — данные ответа
params — параметры запроса
response_text — plain-text данные ответа

ajaxdone

'ce.ajaxdone', [elms, inline_scripts, params, data, response.text]

Запускается после выполнения ajax-запроса, после загрузки всех внешних скриптов

elms — коллекция элементов, которые были обновлены запросом
inline_scripts — массив inline-скриптов, пришедших в ответе

params — параметры запроса
data — данные ответа
response.text — plain-text данные ответа

full_page_load

'ce.full_page_load', [response_data]

Запускается после выполнения ajax-запроса, когда была отрендерена страница полностью (например, переход по ссылке в режиме виджета)

response_data — данные ответа

Немного об Event Delegation в чистом JS | by Alexander Vishnyakov | Mad Devs — блог об IT

English version is available here.

В предыдущей статье, я повествовал об Event Delegation в React. В этой же, я расскажу, как можно воспользоваться этим паттерном в мире событий, чтобы так же успешно преодолевать сложности и в чистом JS.

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

Это может быть и не очень хорошее сравнение, но я считаю, что фреймворки в JS — это высокий уровень (так как они скрывают кучу проблем и дают для каждой решение, порой выстраданное авторами. Вы же понимаете, тут и способ реализации и капризность и особенность браузеров). А вот чистый JS — это ассемблер в мире веб. Тут ты сталкиваешься со всеми проблемами в лоб. И помочь тебе могут лишь твой мозг и StackOverflow 😂.

Итак, время пришло поговорить о чистом JS и о простейшей реализации EventDelegation паттерна.

Прежде чем начать реализацию паттерна, хотелось бы пофантазировать и попробовать эдакое интересное, что показало бы насколько сейчас DOM API богато на разного рода методы, что могут значительно помочь в упрощении вашей задачи. И я немного подумав, решил, что надо показать возможности шаблонизации и запилить такой простенький аналог React с использованием Event Delegation паттерна. Этим мы и займемся дальше!

Что же уже есть из готового и простого решения в DOM браузера для нашей мини React реализации?

Встречайте тэг

<template> — это механизм для отложенного рендера клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.
Template можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <template> во время загрузки страницы, он делает это только, чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.
https://developer.mozilla.org/ru/docs/Web/HTML/Element/template

Отлично! То что надо!

Теперь определимся, что будут уметь наши компоненты?

Уметь обрабатывать навешенные обработчики событий через атрибуты и реагировать на них с использованием Event Delegation принципа
Уметь подставлять данные из свойств первого уровня объекта данных. То есть, указать вложенное свойство типа property.subproperty, пока не получится. Будет только возможность указать property.
В шаблоне свойства объекта данных и названия обработчиков события должны заключаться в фигурные скобки, к примеру вот так {property} или {handlerOfSomeEvent}
Если при разборе DOM будут найдены компоненты не принадлежащие стандартному набору из HTML DOM, то нужно попробовать найти зарегистрированный компонент и заменить нестандартный узел DOM, шаблоном компонента. Прям как в React.
Компонент должен объявляться следующим образом:

<template name="TodoList">
<ol></ol>
</template>

где свойство name будет задавать название компонента. Содержимое тега <template>.

Для объявления компонента в DOM использовать конструкцию вида <TodoList></TodoList>.

Тут мне в голову пришла простая мысль. Реализовать простецкий Todo List.

Функционал:

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

Первая фаза — проход по DOM в поисках <template> и кастомных элементов (HTML тегов). В эту фазу также входит Регистрация компонентов — это ключевой момент, где мы будем применять Event Delegation
Регистрация глобальных обработчиков событий на document элементе + Связывание процессора событий с каждым из глобальных обработчиков.
Вторая фаза — замена кастомных тегов на зарегистрированные компоненты из шаблона.

А теперь ниже рассмотрим по очереди все эти фазы.

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

И этим инструментом является document.createTreeWalker. Бородатые дядьки написали этот метод API для променада по HTML элементам. При этом, вы можете указать параметр фильтрации узлов HTML элементов. Для нашего случая мы будем использовать NodeFilter.SHOW_ELEMENT, нам не нужны будут текстовые узлы, так как мы можем сами пройтись по текстовым узлам, внутри конкретного элемента.

Код данной фазы сосредоточен тут:

Код фазы 1

Для начала, как вы видите, мы создаем объект итератора по элементам DOM. И в качестве рутового элемента, с которого и начнется путешествие по DOM, указываем document.body.

Затем указываем параметр фильтра NodeFilter.SHOW_ELEMENT. После параметра фильтрации, указываем обработчик acceptNode, при желании в котором, можно добавить дополнительные условия фильтрации DOM элементов. Этот обработчик должен возвращать для нужных узлов NodeFilter.FILTER_ACCEPT, а для тех, что стоит пропустить NodeFilter.FILTER_REJECT. В данном случае, для примера, мы всегда возвращаем NodeFilter.FILTER_ACCEPT, так как нас устраивает флаг NodeFilter. SHOW_ELEMENT.

После создания итератора по DOM, переходим к проходу по элементам, используя метод nextNode() и цикл while.

Внутри цикла производим сбор нестандартных элементов DOM. Для этого проверяем имя конструктора узла DOM и для нестандартных компонентов, имя конструктора будет соответствовать HTMLUnknownElement. Найденные элементы записываем в массив для последующей обработки.

Вторым шагом, мы проверяем имя узла на соответствие TEMPLATE. Это объявление наших элементов. И каждый, найденный узел, мы отправляем в процедуру registerTemplate.

Далее посмотрим как работает фаза регистрации компонента.

Вот так выглядит процедура регистрации:

Процедура регистрации шаблона элемента

Для начала мы копируем контент узла шаблона при помощи node.content.cloneNode(true). Более подробно про клонирование, можно почитать тут. Клонирование необходимо для того, чтобы оставить без изменения исходный шаблон.
В качестве дальнейшего шага, мы должны пройти по содержимому шаблона, выявить текстовые переменные для вставки, а так же получить обработчики событий.
Представление элемента в нашей коллекции будет выглядеть так:

{
element,
handlers: {},
textVars: {}
};

element — это узел шаблона компонента, как есть, без обработки.
handlers — это коллекция ключ — функция где и будут храниться все обработчики для конкретного элемента.
textVars — это коллекция индекс — значение. Тут сохраняется позиция в DOM содержимом текущей ноды (естественно без учета изменения позиции, представим, что в нашем случае текстовые узлы не будут менять позиции и это сделано для упрощения).

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

const indexedTemplateName = `${TemplateName}:${id}:${node. nodeName}`;

Из имени шаблона + порядкового индекса + название ноды. Этого нам вполне достаточно, для идентификации элемента.

Добавляем атрибут data-template, который содержит уникальный идентификатор.
Проходим по коллекции атрибутов текущего узла и выявляем подходящие обработчики событий. Они начинаются на on. А так же мы вынуждены сразу удалить атрибут события у текущей ноды, чтобы при вставке в DOM, не смутить браузер.
Проходим по первому уровню вложенности дочерних элементов и заполняем textVars для текущего элемента.

Это и есть костяк Event Delegation, так сказать ядро обработки событий на разных элементах.

Выглядит процессор событий следующим образом:

Процессор обработки событий

А так же, чтобы он заработал, нужно связать его с событиями на document элементе.

Связывания процессора событий с интересующими нас глобальными событиями

Таким образом мы можем теперь реагировать на три необходимые события.

Как же мы будем различать, для какого компонента какой обработчик вызвать? А очень просто, ранее мы пометили каждый элемент специальным атрибутом data-template, в который заложили нужную информацию. Таким образом, разделив строку идентификатора по символу :, мы можем:

Отыскать зарегистрированный компонент
По полному исходному значению атрибута data-template + e.type получить обработчик события.
Проверить соответсвует ли он нашему паттерну {nameOfEventHandler}
Если все нормально, выделить из {nameOfEventHandler} название nameOfEventHandler и уже по этому ключу найти функцию обработчик в коллекции globalEventHandlers
И наконец-то выполнить обработчик, передав в него, объект события.

Эта часть фазы работы нашей простой версии React состоит их двух методов:

phaseTwo — проходит по коллекции обнаруженных на предыдущей фазе, кастомных элементов и используя метод Node. replaceChild заменяет узел на шаблон компонента.

Процедура фазы 2

applyTemplate — производит вставку данных из переданного объекта options в HTML шаблона элемента в соответствии с textVars и возвращает обработанную HTML ноду, готовую для вставки в DOM.

Функция заполнения шаблона данными

Это кусочек кода, который и вдохнет жизнь в наше простое приложение, которое использует Event Delegation.

Входная точка нашего простого React

После того как будет запущена процедура runApp сразу же начнется поэтапное выполнение Фазы 1 и затем Фазы 2. А также установка доступности для кнопки Add, учитывая состояние текстового поля.

В итоге, для начала посмотрим как меняется наш HTML “До” и как говорится “После”.

Вот исходный HTML:

Исходный HTML до обработки нашим простым ReactИ вот что мы получаем после запуска нашего простецкого React

Как видите, внутри div#app вместо кастомных элементов, отображаются элементы из конкретных шаблонов. Можно заметить и обилие data-template с идентификаторами для каждого узла шаблона.
Также вы можете заметить отсутствие onclick и других событий вне тегов <template>.
Внутри тегов <template> все HTML узлы остаются “как есть” без изменений. Так что вы точно можете проверить какие события с какими обработчиками вы указали.

Давайте теперь еще проверим, действительно ли мы используем Event Delegation.

Для начала посмотрим на кнопку

AddПроверка использования processEvent как процессора событий по принипам Event Delegation

Наблюдаем наличие обработчика processEvent для события click на уровне document, никаких локальных обработчиков, уровня элемента нет.

Теперь проверим текстовое поле

Проверка использования processEvent как процессора событий по принипам Event Delegation

И для текстового поля, события input, мы также наблюдаем наличие глобального обработчика processEvent

Как обстоят дела с кнопками удаления туду из списка

Добавим несколько тудушек и также проинспектируем:

Смотрим обработчики события нажатия на кнопку удаления тудушки из списка

И снова видим из длинного списка, отсутствие локальных обработчиков событий. Только глобальные!

Приложение при этом отлично отображает тудушки, дает удалить тудушку из списка!

Вот так простенько и со вкусомСмотрим в действии на StackBlitz!

Из выше-перечисленного, можно сделать вывод, что мы успешно применили принципы и возможности Event Delegation, а также реализовали самую простую версию “React” в образовательных и исследовательских целях.

Самое главное, что теперь если вы задумаете писать свое приложение на чистом JS, то Event Delegation подход:

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

Спасибо большое за прочтение! Надеюсь вам понравилось!

P.S. А еще у вас есть отличная возможность познакомиться с контентом всей команды Mad Devs:
Блог — делимся ништяками, лайфхаками и экспертизой, полученной исключительно на личном опыте каждого члена нашей команды!
Инстаграм — делимся нашими рабочими процессами и
рок-н-рольным настроением!
Подпишитесь и почувствуйте нашу Mad-атмосферу!

События в JavaScript

`error`	Не удалось загрузить ресурс.
`abort`	Загрузка ресурса была прервана.
`load`	браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
`DOMContentLoaded`	когда HTML загружен и обработан, DOM документа полностью построен и доступен.
`beforeunload`	пользователь покидает страницу. Мы можем проверить, сохранил ли он изменения и спросить, на самом ли деле он хочет уйти.
`unload`	пользователь почти ушёл, но мы всё ещё можем запустить некоторые операции, например, отправить статистику.
`resize`	Событие запускается когда размер документа был изменён.
`orientationchange`	Событие запускается когда изменилась ориентация устройства.
`scroll`	Событие прокрутки, позволяет реагировать на прокрутку страницы или элемента.

События мыши
`click`	Событие происходит когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
`dblclick`	Событие возникает когда пользователь дважды нажимает на элемент. Он срабатывает после двух событий `click`.
`contextmenu`	Событие происходит происходит, когда кликнули на элемент правой кнопкой мыши.
`mouseover`	Событие происходит когда мышь наводится на элемент.
`mouseout`	Событие происходит когда мышь покидает элемент.
`mousedown`	Событие происходит когда нажали кнопку мыши на элементе.
`mouseup`	Событие происходит когда отжали кнопку мыши на элементе.
`mousemove`	Событие происходит при движении мыши.

События клавиатуры
`keydown`	Событие происходит когда пользователь нажимает клавишу.
`keyup`	Событие происходит когда пользователь отпускает клавишу.
`keypress`	Устаревшая. Эта функция больше не рекомендуется.
События формы
`change`	когда значение элемента изменилось.
`input`	срабатывает каждый раз при изменении значения. В отличие от событий клавиатуры, оно работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи при диктовке текста.
`focus`	срабатывает в момент получения элементом фокуса.
`blur`	срабатывает когда элемент теряет фокус.
`submit`	пользователь отправил форму `<form>`
`invalid`	если элемент не прошел валидацию, только для тега `<input>`.

`storage`	Событие возникает когда область хранения была изменена в контексте другого документа.

`beforeprint`	Событие вызывается когда соответствующий документ готов для печати или предварительного просмотра для печати.
`afterprint`
События анимации
`animationend`	конец анимации
`transitionend`	Событие `transitionend` срабатывает, когда CSS transition закончил свое выполнение
События буфера обмена
`copy`	возникает, когда пользователь копирует контент элемента. Для всех элементов.
`cut`	возникает, когда пользователь вырезает контент элемента. Для всех элементов.
`paste`	возникает, когда пользователь вставляет контент в элемент. Для всех элементов.
События касаний (тач-события)
`touchstart`	Событие вызывается когда одна или более точек касания расположены на сенсорной поверхности.
`touchend`	Событие срабатывает когда одна или более точек касания удаляются с сенсорной поверхностью.
`touchcancel`	Событие вызывается когда одна или несколько точек касания были разрушены в реализации, определенным образом (например, слишком много точек соприкосновения созданы).
`touchmove`	Событие вызывается когда одна или несколько точек касаний перемещаются по сенсорной поверхности.
События Drag-and-Drop
`drag`
`dragend`
`dragenter`	перетаскиваемый объект перетаскивается над dropArea, делая dropArea целью события drop, если пользователь перетащит его туда.
`dragexit`
`dragleave`	перетаскиваемый объект перетащили за пределы dropArea на другой элемент, делая его целью события drop вместо dropArea.
`dragover`
`dragstart`
`drop`	пользователь отпустил кнопку мыши, перетаскиваемый объект перетащили на dropArea.

Обработка событий JavaScript фреймворка Vue.js

Подписка на события

Для подписки на события DOM и выполнения JavaScript-кода по их наступлении, используйте директиву v-on.


<div>
  <button v-on:click="counter += 1">+1</button>
  <p>Кнопка выше была нажата {{counter}} раз</p>
</div>


var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Обработчики событий

Логика обработки события может быть сложной, поэтому v-on может принять название метода, который нужно вызвать.


<div>
  <!-- `greet` — это название метода, определённого ниже -->
  <button v-on:click="greet">Поприветствовать</button>
</div>


var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.  js'
  },
  // определяйте методы в объекте `methods`
  methods: {
    greet: function (event) {
      // `this` внутри методов указывает на экземпляр Vue
      alert('Привет, ' + this.name + '!')
      // `event` — нативное событие DOM
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// вызывать методы можно и императивно
example2.greet() // => 'Привет, Vue.js!'

Методы и inline-обработчики

Связаться с методом можно не по имени, а вызвав в JavaScript-выражении.


<div>
  <button v-on:click="say('hi')">Скажи hi</button>
  <button v-on:click="say('what')">Скажи what</button>
</div>


new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

Передать оригинальное событие DOM в метод inline-обработчика можно через специальную переменную $event:


<button v-on:click="warn('Форма пока что не может быть отправлена. ', $event)">
  Отправить
</button>


// ...
methods: {
  warn: function (message, event) {
    // теперь у нас есть доступ к нативному событию
    if (event) event.preventDefault()
    alert(message)
  }
}

Модификаторы событий

При необходимости вызвать event.preventDefault() или event.stopPropagation() в обработчике события нужно использовать модификаторы событий для v-on.

Модификаторы директив указываются как постфиксы и отделяются точкой.

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

.stop
.prevent
.capture
.self
.once


<!-- событие click не будет всплывать дальше -->
<a v-on:click.stop="doThis"></a>

<!-- событие submit больше не будет перезагружать страницу -->
<form v-on:submit. prevent="onSubmit"></form>

<!-- модификаторы можно объединять в цепочки -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- и использовать без указания пользовательского обработчика -->
<form v-on:submit.prevent></form>

<!-- при добавлении слушателя события можно использовать capture mode -->
<!-- т.е. событие, нацеленное на внутренний элемент, обрабатывается здесь после обработки этим элементом -->
<div v-on:click.capture="doThis">...</div>

<!-- вызывать обработчик только в случае наступления события непосредственно -->
<!-- на данном элементе (то есть не на дочернем компоненте) -->
<div v-on:click.self="doThat">...</div>

Порядок модификаторов имеет значение, так как код генерируется в указанном порядке. Использование @click.prevent.self будет предотвращать все клики, а @click.self.prevent будет предотвращать клики только на самом элементе.


<!-- Событие click сработает только 1 раз -->
<a v-on:click.once="doThis"></a>

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

Модификаторы клавиш

Vue позволяет добавить модификаторы клавиш при использовании v-on для отслеживания событий от клавиатуры:


<!-- вызвать `vm.submit()` только если `keyCode` равен 13 -->
<input v-on:keyup.13="submit">

Vue предоставляет псевдонимы для часто используемых кодов клавиш:


 <!-- аналогично примеру выше -->
<input v-on:keyup.enter="submit">

<!-- работает также и в сокращённой записи -->
<input @keyup.enter="submit">

.enter
.tab
.delete (ловит как “Delete”, так и “Backspace”)
.esc
.space
.up
.down
.left
.right

Можно также определить пользовательские псевдонимы клавиш через глобальный объект config.keyCodes:


// позволит использовать `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

Автоматические модификаторы клавиш

Использовать любые допустимые имена клавиш напрямую, открытые через KeyboardEvent.key в качестве модификаторов, можно именуя их в kebab-case:


<input @keyup.page-down="onPageDown">

В примере обработчик будет вызван если $event.key === ‘PageDown’.

Системные модификаторы клавиш

Можно использовать следующие модификаторы, чтобы отслеживать события мыши или клавиатуры с зажатой клавишей-модификатором:


<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Сделать что-нибудь</div>

Модификатор .exact

Модификатор .exact дает контролировать точную комбинацию системных модификаторов, нужных для запуска события.


<!-- это сработает даже если Alt или Shift также нажаты -->
<button @click.ctrl="onClick">A</button>

<!-- это сработает только когда нажат Ctrl и не нажаты никакие другие клавиши -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- это сработает только когда не нажаты никакие системные модификаторы -->
<button @click.exact="onClick">A</button>

Модификаторы клавиш мыши

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

Почему подписчики указываются в HTML?

Все обработчики во Vue строго связываются с ответственным за текущее представление экземпляром vm. Поэтому трудностей в поддержке не возникает.

Преимущества использования v-on:

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