Делегирование событий JavaScript и dispatchEvent

Question

Имеются select'ы, которые вставляются в документ динамический, их изменения обрабатывают так:

document.addEventListener('change', function(event) {
    if(event.target.contains('select-class')) { ... }
});

Иногда меняю их значения через value: "select.value = value;". Когда меняю значение, то событие не вызывается. Пробовал вот так:

select.dispatchEvent(new Event('change'));
...
document.dispatchEvent(new Event('change'));

Ничего из этого не сработало. Как я могу это решить?

Answer 1

вторым аргументом передается обект с свойствами например разрешить всплытие

dispatchEvent(new Event('change',{bubbles:true}))

но в твоем примере с document.dispatch все должно работать и без всплытия там пропушена скобка

мне кажется ты не правильно понял темы делегирования и слушателей вообше есть не только всплытие но и погружение если у тебя слушатель на элементе а событие срабатывает на родителе тебе надо ловить на погужении и обратная логика если переставить местами то на всплытии.Какие параметры за это отвечають можно глянуть в любой документации.Что касается сгенерированных событий то есть не пользовательских они по дефолту не умеют всплывать про пагружение не помню так что если слушатель на документе а событие генерируется на элементе то надо обязательно указать {bubbles:true} что бы оно всплыло до документа

Answer 2

Не знаю насколько это правильно, но для меня это работает

// при изменении селекта
let changeEvent = new Event('change');
changeEvent._target = control;
document.dispatchEvent(changeEvent);

// в обработчике
document.addEventListener('change', function(event) {
    const target = event._target || event.target;
    if(target.contains('select-class')) { ... }
});

БЛОГ НА HUSL

Делегирование событий JavaScript и dispatchEvent

Ответы (2 шт):