Обработчик событий в библиотеке BX

Обработчик события на click по ID элемента с использованием библиотеки Битрикс:

BX.ready(function () {
BX.bindDelegate(document.body, "click", { idName: "test" }, function (e) {
    BX.PreventDefault(e);
    console.log("Привет");
});
});

Обработчик события на click по class элемента с использованием библиотеки Битрикс:

BX.ready(function () {
BX.bindDelegate(document.body, "click", { className: "test" }, function (e) {
    BX.PreventDefault(e);
    console.log("Привет");
});
});

Кастомные события

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

1. BX.onCustomEvent() функция вызывает обработчики события
2. BX.addCustomEvent() Функция назначает обработчик события, например в виде функции колбэка

BX.onCustomEvent(
    // не обязательный параметр
    Object eventObject,
    string eventName,
    Array [arEventParams]
);

Функция вызывает все обработчики события eventName для объекта eventObject (не обязательный параметр), а также все глобальные обработчики, назначенные без указания объекта. Если не указан объект, в котором возникает событие, то будут вызваны только глобальные обработчики. Обработчик будет выполнен в контексте объекта, в котором возникло событие. Значения из массива arEventParams будут переданы в качестве входных параметров обработчика.

BX.addCustomEvent(
    // не обязательный параметр
    Object eventObject,
    string eventName,
    Function eventHandler
);

Функция назначает обработчик eventHandler кастомному событию с именем eventName, возникающем в объекте eventObject (не обязательный параметр). Если eventObject не указан, то обработчик будет вызываться при каждом вызове события с таким именем в любом объекте.

Наглядный пример, как работают кастомные события:

// находим кнопку с ID button и вешаем событие клик
BX('button').addEventListener('click', function (event) {
    // функция вызывает обработчики событий hmarketingTest и передает в обработчики текст кнопки и event
    BX.onCustomEvent('hmarketingTest', [this.innerText, event]);
});
// функция назначает обработчик для события hmarketingTest в виде колбек функции
BX.addCustomEvent('hmarketingTest', function (id, event) {
    console.log(id)
    console.log(event)
})