Хуки 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 функцию. Если в этом параметре передана строка, она интерпретируется как название события.

Большое обновление CS-Cart уже здесь Попробуйте новую панель администратора с темной темой