> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/sobytiya.md).

# События

В данном разделе приведено подробное описание событий элементов и особенностей работы с ними

Представляют собой определённые методы, срабатывающие в элементах при определённых действиях пользователя.

#### **Свойства:**

* *<mark style="color:purple;">event</mark>*

Тип события элемента. (*<mark style="background-color:purple;">onClick</mark>*, *<mark style="background-color:purple;">onKeyPress</mark>*, *<mark style="background-color:purple;">onChange</mark>*, *<mark style="background-color:purple;">onInit</mark>*, и т.д.). Доступные типы событий каждого элемента указаны в его описании.&#x20;

* *<mark style="color:purple;">method</mark>*

Строковый идентификатор метода на стороне API. Подробнее в разделе [Работа с API](/ui-konstruktor-oktell/rabota-s-api.md). Существуют "частные случаи" использования поля.&#x20;

Например, если выбрать ***local\_event***, то запрос на бекенд отправляться не будет. Вместо этого, значения, описанные в поле *<mark style="color:purple;">values</mark>* будут установлены в текущий *<mark style="color:purple;">**state**</mark>*. Более подробное описание приведено в свойстве *<mark style="color:purple;">values</mark>*. Типовой сценарий использования - если, например, необходимо показать всплывающее или модальное окно, и нет необходимости обращаться к бекенду т.к. никаких новых данных для данного действия не потребуется.

* *<mark style="color:purple;">url</mark>*

Адрес внешнего **API**, для случаев, если он отличается от настроенного в приложении по умолчанию

* *<mark style="color:purple;">modal</mark>* - *(deprecated)*

~~Идентификатор модального окна. При срабатывании события открыть модальное окно.~~

* *<mark style="color:purple;">keys</mark>*

Комбинация клавиш, при которой сработает текущее событие. Поддерживается только типами событий *<mark style="background-color:purple;">onClick</mark>*, *<mark style="background-color:purple;">onKeyPress</mark><mark style="color:blue;">.</mark>* Например:

* `['s', 'w']`  - при нажатии **s** *или* **w**

* `['ctrl+w']`  - при нажатии **ctrl** *и* **w**

* `['!ctrl+w']`- при нажатии **w** без зажатого **ctrl**

* *<mark style="color:purple;">cancelable</mark>*

Определяет, будет ли отменён текущий активный запрос в **API** этого события, если до получения ответа сервера будет отправлен аналогичный запрос. Типичный случай использования данного свойства - при событии *<mark style="background-color:purple;">onChange</mark>* при вводе данных в поле, т.к. предыдущее значение поля уже не имеет своей актуальности, соответственно запрос с отправкой устаревшего значения можно отменять.

* *<mark style="color:purple;">values</mark>*

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

* *<mark style="color:purple;">key</mark>* - ключ значения в **payload** запроса, например, если указать **username**, то поле *<mark style="color:purple;">values</mark>* будет иметь вид `{ values: {`` `**`username`**`: "some_user_name" }}`
* *<mark style="color:purple;">path</mark>* - путь к значению, которое необходимо передать на бекенд. Например, если нам нужно передать значение **value** поля ввода с идентификатором **username\_input\_field**, то в данном поле нужно задать  значение **username\_input\_field.value,** для указания пути к вложенным свойствам, можно указать индекс данного вложенного поля, например **grid\_table.headers.columns.0.title**, индекс элемента отображается в UI в его заголовке (например, <mark style="color:green;">**Элемент 1**</mark> - индекс == 1)

{% hint style="info" %}
При значении поля *<mark style="color:purple;">method</mark>*, установленном в ***local\_event***, поведение данных полей обратное:

* *<mark style="color:purple;">key</mark>* - путь к значению, которое необходимо обновить, аналогично с *<mark style="color:purple;">path</mark>* в стандартном режиме
* *<mark style="color:purple;">path</mark>* - значение, которое необходимо установить для поля, путь до которого указан в *<mark style="color:purple;">key .</mark>*&#x20;

Так, например, если в данном сценарии с методом ***local\_event*** установить значения

&#x20;{   &#x20;

&#x20;  *<mark style="color:purple;">`key`</mark>*`:`` `**`grid_table.headers.columns.0.title`**`,`

&#x20; *<mark style="color:purple;">`path`</mark>*`:`` `**`"Имя пользователя"`**

&#x20;`}`

то в первой колонке таблицы заголовок изменится на **"Имя пользователя"**.

Данная реализация принята в такой форме ввиду обобщённого механизма обработки событий, который преобразует значение *<mark style="color:purple;">path</mark>* на внешнем уровне абстракции, и передаёт в обработчик запроса уже конвертированные, подготовленные данные, что не позволяет передавать значение *<mark style="color:purple;">path</mark>* в исходном виде, указанном в редакторе, без значительной переработки абстракции метода.
{% endhint %}

* *<mark style="color:purple;">type</mark>* - идентификатор события
* *<mark style="color:purple;">cancelTypes</mark>* - список идентификаторов событий, запросы которых отменит данное событие

Данные поля работают в связке друг с другом и позволяют при срабатывании текущего события отменять активные запросы из других событий. Рассмотрим более подробно на примере: Существует компонент с вкладками, в некоторых из которых присутствуют компоненты контейнеров, которые запрашивают данные из API через событие *<mark style="background-color:purple;">onInit</mark>*. При переключении вкладки, запрос на получение данных контейнера закрытой вкладки теряет актуальность и должен быть отменён,  соответственно, для таких контейнеров в событии  *<mark style="background-color:purple;">onInit</mark>* укажем произвольный тип (например, **dynamic\_data**), а в событии *<mark style="background-color:purple;">onSelect</mark>* компонента вкладок, добавим данный тип в списке *<mark style="color:purple;">cancelTypes</mark>*. Теперь, при переключении вкладки все текущие запросы из событий с типом **dynamic\_data** будут отменяться. Также корректно установленные данные свойства помогают избежать т.н. [race condition](https://ru.wikipedia.org/wiki/%D0%A1%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5_%D0%B3%D0%BE%D0%BD%D0%BA%D0%B8) запросов, если они имеют родственную природу и ответственны за отображение одного контента. Например, запрос на получение данных таблицы - в случае, если описываемые свойства не указаны, при отправке нескольких таких запросов, каждый последующий из которых имеет более актуальные данные, можно попасть в ситуацию, когда время выполнения более актуального запроса будет меньше, чем менее актуального, и в *<mark style="color:purple;">**state**</mark><mark style="color:purple;">.controls</mark>* будут установлены данные, полученные из запроса, ответ на который пришел последним.