Как найти и использовать JS-события в Битрикс24

JavaScript-события в Битрикс24 играют ключевую роль в кастомизации и расширении функционала системы. В этой статье мы разберем, как найти нужные события и правильно их использовать в ваших проектах.

Что такое события в Битрикс24

События (hooks) - это специальные точки в коде Битрикс24, которые позволяют разработчикам добавлять собственный JavaScript-код в определенные моменты работы системы. Они помогают:

• Модифицировать поведение стандартных компонентов

• Добавлять новый функционал

• Интегрировать сторонние сервисы

• Автоматизировать рутинные задачи

Основные типы событий

1. OnBeforeEvent
   • Вызываются перед выполнением основного действия
   • Пример: onBeforeSave, onBeforeDelete
2. OnAfterEvent
   • Происходят после выполнения основного действия
   • Пример: onAfterSave, onAfterUpdate
3. OnCustomEvent
   • Пользовательские события для специфичных задач
   • Создаются разработчиками при необходимости

Ищем события JS

Вариант 1:

• Идем в /bitrix/js/main/core/core.js
• Находим функцию function onCustomEvent
• Дописываем строчку:

  
   console.log('onCustomEvent', eventObject, eventName, eventParams, secureParams);
  

  Смотрим консоль в браузере

Вариант 2:

В любом месте по коду (в шаблоне или в расширении)

    
        
            let originalBxOnCustomEvent = BX.onCustomEvent;
            BX.onCustomEvent = function (eventObject, eventName, eventParams, secureParams)
            {
            // onMenuItemHover например выбрасывает в другом порядке
                let realEventName = BX.type.isString(eventName) ?
                eventName : BX.type.isString(eventObject) ? eventObject : null;
                if (realEventName) {
                    console.log('%c' + realEventName,'background: #222; color: #bada55; font-weight: bold; padding: 3px 4px;');}
                    console.dir({eventObject: eventObject,eventParams: eventParams,secureParams: secureParams});
                originalBxOnCustomEvent.apply(
                null, arguments
                );
            };
        
  

Далее этот файл нужно подключить в init.php

С помощью такого метода

 \Bitrix\Main\UI\Extension::load(['witja_crmcustomtab.useless_extensions.greeting-message']);

Где witja_crmcustomtab.useless_extensions.greeting-message путь до вашего файла в папке /local/js/

Пример данного метода можете скачать тут 

Вариант 3:

Поиском из консоли: grep -iRl "BX.onCustomEvent" bitrix/js/

Например: grep -iRl --include \*.js "BX.onCustomEvent"

/home/www/bitrix/modules/timeman/

Как использовать события

1. Базовый синтаксис

BX.addCustomEvent('OnAfterSave', function(params) {
    // Ваш код здесь
    console.log('Элемент сохранен', params);
});

2. Работа с параметрами

BX.addCustomEvent('OnBeforeDelete', function(id, type) {
    if (!confirm('Вы уверены?')) {
        return false; // Отмена удаления
    }
    return true;
});

3. Удаление обработчика

var handler = function() { /* ваш код */ };
BX.addCustomEvent('OnAfterLoad', handler);
// Позже можно удалить
BX.removeCustomEvent('OnAfterLoad', handler);