Хуки JavaScript: события и колбэки¶

События¶

Общая информация¶

События в новой версии служат заменой хукам и колбекам.

Событие объявляется так:
```
$.ceEvent('trigger', 'ce.event_name', [a, b,c]);
```
Где:
- ce.event_name — название события, обязательно с префиксом ce (CS-Cart event)
- [a, b, c] — массив параметров, которые будут переданы обработчикам события
Обработчик объявляется так:
```
$.ceEvent('on', 'ce.event_name', function(a, b,c) {
    //...
});
```
Если заменить on на one, то обработчик выполнится только 1 раз и после этого удалится.
Обработчиков может быть несколько, выполняются они в порядке, в котором были объявлены. Обработчик может вернуть false - в этом случае последующие обработчики не будут выполнены.
Событиями будут являться любые действия пользователя – это и ввод данных с клавиатуры, и передвижения мышки, и конечно же клики – всё это и есть события. К событиям можно еще отнести события создаваемые скриптами и триггерами.
Например если вам необходимо показать alert после ajax запроса то легче всего это будет сделать подписавшись на событие.
```
$.ceEvent('on', 'ce.ajaxdone', function(event) {
    alert('Ajax done');
});
```
Если вам требуется подписаться лишь на 1 событие. То есть не выполнять код при каждом ajax запросе, а только выполнить его единожды для этого следует использовать событие one
```
$.ceEvent('one', 'ce.ajaxdone', function(event) {
    alert('Ajax done');
});
```

События по умолчанию¶

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 — данные ответа

Добавить своё событие¶

Событие объявляется так:

$.ceEvent('trigger', 'ce.event_name', [a, b,c]);

Где:

ce.event_name — название события, обязательно с префиксом ce (CS-Cart event)
[a, b, c] — массив параметров, которые будут переданы обработчикам события

Обработчик объявляется так:

$.ceEvent('on', 'ce.event_name', function(a, b,c) {
    //...
});

Пример запуска после аякс-запроса:

$.ceAjax('request', 'http://site.com', {
     callback: 'ce.some_event'
});

Колбэки¶

Раньше колбеки для некоторых действий (ajax-запрос, вызванный DOM-элементом, отображение/скрытие элемента через cm-combination) задавались достаточно “магично”. В элемент добавлялся параметр name, например name=”some_action”. При выполнении действия, например ajax-запроса, искалась функция fn_some_action и передавалась в качестве колбека при вызове запроса.

Теперь, событие объявляется через аттрибут data-ca-event элемента, например “ce.ajax_callback”. После выполнения запроса запускается соответствующее событие.

Замечание: в $.ceAjax осталась возможность передавать в параметре callback функцию. Если в этом параметре передана строка, она интерпретируется как название события.