Правильно ли вешать обработчик события на document.body?

Question

[gleendo]

Исходный код на codepen
Суть непонимания на 23 строке:

document.body.addEventListener("update-form", () => {
	this.load();
	this.userForm.destroy();
}, false);

Данные формы изменяются, и после нажатия Submit, список должен перерисовываться. Правильно ли в данном случае вешать слушателя обновления формы на document.body? На что его лучше поставить.

Comments

[Kovalsky]

В связи с чем у вас возник вопрос? У вас возникают проблемы при использовании описанной схемы?

[gleendo]

Никита Полевой: Я просто не шарю в компонентной разработке. Пол приложения делали по видео, остальную часть нужно было сделать самому. Вроде как сделал. Но вот не совсем понятно куда же этот обработчик вешать. Повесил на весь документ можно сказать, но хз, правильно ли это. В этом же приложении, если нажать на user, то сработает событие user-select. Данное событие вешается на на список пользователей. Как только событие сработает, то рендерится форма.

Answer 1

[Владимир]

Почему бы не поставить на ближайший wrapper?

Comments

[gleendo]

Владимир Как раз ближайшая обертка это body

[Владимир]

iamevg_: тогда не вижу никакого криминала в том, чтобы повесить обработчик на body. Событиям не придётся долго подниматься по дереву DOM. Почитайте здесь про делегирование и здесь про stopPropagation

Answer 2

[Stalker_RED]

Это называется делегирование. Этот обработчик может обслуживать сразу несколько форм.
Ничего плохого в этом нет, разве что вы немного захламляете список обработчиков на body.

Comments

[gleendo]

Stalker_RED На счет делегирования я знаю, мне не ясно к чему вешать обработчик например если не использовать делегирование...
И нашел еще одну проблему. Почему то после изменения данных, форма не удаляется, а просто сжимается до нулевой высоты, хотя использую this.form.remove()

[Stalker_RED]

iamevg_: я вот сейчас открыл codepen и понажимал. и форма таки удаляется, остается только <div class="user-form">

[gleendo]

Stalker_RED: Я на счет удаления формы пофиксил, теперь все нормально работает. Вроде как "приложение" готово, но вот такое чувство что если завтра попробую сам опять сделать подобное, то ничего не выйдет.
Я уже овер много изучаю js, но вот архитектура приложений меня всегда пугает. Я вообще не понимаю как ее организовывать. Наговнокодить все в императивно декларативном стиле я могу, а вот best practices я не знаю в этой теме. Сегодня вот еще узнал про компонентный подход. Но все равно не до конца все понятно, как эти компоненты разрабатывать, как организовывать общение между ними и т.д. С таким то "приложением" ели как справился и то половина по видео, да и то кажется что моя половина гавно.

PS. На счет обработчика...Кроме как на document.body ни на что не вешается, хз почему.