кому не лень, поделитесь опытом по javascript

Решил я вот в одной из своих программ избавиться от jquery
Его там реально 4 строчки и нет смысла его тянуть.
Но что то я туплю.
У меня был некий обработчик события change у формы

$(document).on('change', this.config.filterWrapper, function () {
const filterData = $(this).serializeArray();
}

где this.config.filterWrapper это идентификатор формы.
Работает как нужно — события изменения любого элемента этой формы запускают этот код и что важно — this всегда ссылается на форму. Что позволяет следующей строкой получить в переменную все значения всех элементов формы, неважно какой именно был изменен.

Начинаю разбираться с событиями в javascript.
Опираюсь на это learn.javascript.ru/introduction-browser-events
и там описывается три способа создать реакцию на событие.

Есть три способа назначения обработчиков событий:
Атрибут HTML: onclick="...".
DOM-свойство: elem.onclick = function.
Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.

Ну работать с инлайновым js и вписывать его в html не солидно, путаюсь понять работу addEventListener.
Пишу вот такое

document.addEventListener('change', function (event) {
            console.log(event.target);
        })

смущает тот факт, что отслеживаются все события change возникающие в документе (подозреваю что jquery работает под капотом так же просто это скрыто от нас). Но проблема на лицо — как отслеживать события только внутри определенной формы? На странице может быть их много. Приходит в голову мысль, что раз у нас есть объект event то через него можно проверять кто инициатор, кто target и уже по условию проверять наш ли это пациент. Но ожидаемо, что targеt это не есть форма, это dom элемент, на котором произошло событие — input, select и так далее. А значит мне по прежнему ничего не известно о том, из какой конкретно формы этот элемент. Да можно пытаться у каждого элемента проверять кто его предок, проверять у предка id и смотреть не наша ли это форма, но это плохо и плюс формы на всегда содержит только тег form и сразу inputы, там может быть сложная разметка div, span что угодно.

Так как же правильно обработать событие change чтобы в идеале event.target указывавал на форму в которой произошло измеенние, а не на сам элемент или хотя бы, а как грамотные люди определяют в какой форме на странице произошло изменение?

.serializeArray();

0: Object { name: "price", value: "22000" }
1: Object { name: "price", value: "150000" }
2: Object { name: "brand", value: "Maugli" }
length: 3

document.addEventListener('change', e => {
    const target = e.target;

    if (target.matches('.some-selector')) { /* code */}
    // или можно прям на наличие класса проверять
    if (target.classList.contains('имя класса без точки')) { /* code */ }
});

if (target.closest('.form') !== null) {}

for (const [key, value] of formDataInstance) {
    console.log(key, value);
}