Как сделать обработку событий для всех элементов в таблицы?

Question

[winser]

Генерирую таблицу с помощью функции createEl вот ее описание https://docs.obsidian.md/Plugins/User+interface/HT...
то есть если схематично то я просто делаю

table = createEl('table');
th = table.createEl("thead");
tr = th.createEl("tr");
td = tr.createEl("td");

итд, в ячейках таблицы генерирую например селект или инпут, если сразу после генерации хтмл элемента добить обработчик события то все работает

input = td.createEl("input");
input["className"] = "inlinedb-input"
input.addEventListener('change', update_js);

Но я узнал что лучший вариант это добавлять обработчики после формирования таблицы, так как это обещает лучшее быстродействие
но вот так не работает

table.querySelectorAll('.inlinedb-input').forEach((x) => x.addEventListener('change', update_js));

Не понимаю как это все отладить и куда смотреть

Comments

[Александр]

А делегирование событий уже пробовали?

[winser]

Александр, это как ? и зачем?

[imko]

winser, таблица.addEventListener(чендж, ()=>{если (по инпуту) то ...}) один слушатель на всю таблицу вместо кучи для каждого инпута

[imko]

input["className"] = "inlinedb-input" 0_о а так можно было что ли

[winser]

imko, можно попонятней и на аглийском этот вариант
таблица.addEventListener(чендж, ()=>{если (по инпуту) то ...})
я не силен в js синтаксисе

да input["className"] с моей функцией createEl работает, по идее и везде должен, очень удобный синтаксис

[Александр]

winser, Что-то вроде https://learn.javascript.ru/event-delegation

[winser]

Александр,

table.onchange = function(event) {
        let target = event.target; // где был клик?      
      };

вот так работает, а как теперь в зависимости от имени класса хтмл тега запустить нужную функцию ?

[Александр]

winser, через closest можно найти родительский элемент. И после по условию вызвать обработчик.

[winser]

Александр, что то не то советуете либо я чего то не понял
Метод Element.closest() ищет и возвращает ближайший (начиная с самого элемента) родительский элемент, соответствующий указанному CSS-селектору

имя класса у меня может быть одно и то же всех элементах, а обработать событие мне надо только с того html элемента который вызвал событие, а не с ближайшего к родительскому элементу то есть table в моем случае

Answer 1

[Valeri Tsvetkov]

Обработчик срабатывает после клика по любому элементу таблицы, затем по id элемента, по которому кликнули (event.target.id) вызываем функцию. Можно сделать универсальный обработчик всех кликов для всего документа, тогда window.addEventListener()

table.addEventListener('click', (event) => {
  if (event.target.id === "submit_id") {
    submit_function();
  }
})

Comments

[winser]

спасибо то что нужно, все работает и все понятно!

я только не понимаю зачем такую конструкцию с циклом применяют (у меня она не заработала, но это скорее всего только мои проблемы)

table.querySelectorAll('.inlinedb-input').forEach((x) => x.addEventListener('change', update_js));

она же более громоздкая, хуже читается и по скорости не уверен что лучше, я ее взял из кода вроде как хорошего программера как пример.

[Михаил Ливач]

winser, потому что вариант Valeri Tsvetkov опирается на всплытие события. Которое могут перехватить, например.
И это всегда проблема выбора: обработчик на контейнере, который должен разобраться, что же там прилетело, или идентичные обработчики на пачке идентичных элементов.

[winser]

Михаил Ливач, ну так я не пойму а что лучше и почему ?

[Михаил Ливач]

winser, тут нет "лучше" или "хуже". Если в Вашей ситуации решение Valeri Tsvetkov сработало без проблем - отлично, пользуйтесь.
Когда столкнётесь с тем, что такой подход с чем-то конфликтует - вспомните, что можно и по-другому.