Отловить событие на динамически изменяющихся страницах, функция bindDelegate ()

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

BX.bindDelegate(
    // родитель-контейнер
    parentNode,
    // имя DOM-события
    eventName,
    // фильтр целевых узлов
    isTarget,
    // колбэк-обработчик
    handler
);

Параметр	Тип	Что означает
`parentNode`	`HTMLElement`	Узел, на который вешается единственный реальный обработчик
`eventName`	`String`	Любое поддерживаемое браузером событие («click», «input», «keydown» и т.д.)
`isTarget`	`Object`	Фильтр: указываем свойства, которые должен иметь дочерний узел-источник
`handler`	`Function`	Выполняется при всплытии события, если узел прошёл фильтр

Настраиваем фильтр isTarget:

{
    // по тегу
    tagName  : 'A',
    // по классу
    className: 'btn--blue',
    // по наличию атрибутов
    attr     : {
        'data-role': 'save'
    }
}

Фильтр может содержать любое подмножество полей:

tagName сравнивается без учёта регистра
className / class должен содержать указанный класс
attr объект вида { 'data-id': '15' }, значения сравниваются как строки
id строгое совпадение

Можно передать и функцию:

isTarget: function(node) {
    return node.dataset && node.dataset.track === 'subscribe';
}

Подсветка активного пункта меню без перезагрузки

<ul id="nav" class="nav">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
</ul>
<style>
.nav a {
    padding: 6px 10px;
    display: inline-block;
}
.nav .on {
    background:#0066cc;
    color:#fff;
    border-radius:4px;
}
</style>
<script>
BX.bindDelegate(
    BX('nav'),
    'click',
    { tagName: 'A' },
    function(event) {
        event.preventDefault();
        // Снимаем старый класс
        BX.findChildren(BX('nav'), { className: 'on' }, true)
          .forEach(node => BX.removeClass(node, 'on'));
        // Ставим новый
        BX.addClass(this, 'on');
    }
);
</script>