Как правильнее вешать события?

Question

[Ruslan Zamuraev]

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

Answer 1

[ThunderCat]

Как правильнее вешать события?

Зависит. Общее поведение и динамическое добавление новых элементов - однозначно делегирование. В других случаях нужно смотреть есть ли в этом смысл, так как делегирование больше нагружает приложение, дергаясь на каждый прописанный паренту евент.

Comments

[Ruslan Zamuraev]

Ну например возьмем аккордион или табы у которых изначально не известно сколько будет пунктов 3, 4 или 10, или же выпадающее меню у которого такая же история

[Stalker_RED]

Кончно зависит, вы правы. Но если событие "клик" то пускай этот парент дергается, сколько там пользователь сделает кликов за время работы приложения - пару штук? Да хоть пару сотен кликов, не критично.
А если слушать событие mousemove или touchmove, да в его обработчике делать что-то тяжелое - изменять DOM, да еще и с вызовами reflow/repaint то да, можно получить аццкие тормоза. Но и эти тормоза можно убрать применив throttle/debounce.

Answer 2

[Stalker_RED]

Если одинаковое поведение, например кнопка "в корзину" у каждого товара на странице, то лучше общий, конечно.

Answer 3

[Александр Маджугин]

Через атрибуты.
jquery-style пора уже оставить в прошлом и не насиловать труп.

Comments

[Stalker_RED]

Что вы имеете в виду? Прописывать в каждый элемент onclick="myFunc()"? Или какие атрибуты?

[Алексей Дубровин]

Тоже не понял.
Через атрибуты есть решение?

[Александр Маджугин]

Stalker_RED, именно это я и имею ввиду.
В общем случае навешивать события должен тот же агент который создает DOM структуру.
Т.е. если у вас реактивный фреймворк или какой-то другой подход с рендерингом на клиенте - вешайте события из js, ради бога.
Но если вы создаете html на бекенде, тогда и события навешивайте на бекенде - не порождайте лишнюю связность между клиентской и серверной частью.
Можно конечно написать очень аккуратный js, который будет выбирать элементы по отдельным, исключительно своим селекторам, перезапускаться и перенавешивать события после всех изменений DOM, по отдельным событиям для этих изменений, но все это ниточки примотанные к рукам мертвеца, с помощью которых вы пытаетесь показать что он еще жив и может что-то делать.

[ThunderCat]

Александр Маджугин, редкой упоротости бред. Как это понижает связанность с бэкендом? Кроме того, в любом случае у вас будет обработчик, который на js и его как-то надо ввести в страницу. Какая разница, буду ли я вешать евенты или в каждом элементе прописывать реакцию на событие? Ну, кроме того что логика может поменяться и вам на бэкенде надо будет все равно что-то менять, но в вашем случае менять во всех вьюшках, а в случае евентов только в одном яваскрипте... Не считая того что в прямой записи евента в элемент происходит ранее связывание, а значит скрипты должны загружаться до контента...

[Александр Маджугин]

Как это понижает связанность с бэкендом?

JS больше не нужно следить за состоянием DOM

Кроме того, в любом случае у вас будет обработчик, который на js и его как-то надо ввести в страницу.

Да. И сервер надо настраивать и домен не забывать продлевать, сертификаты вовремя выпускать и овощи есть. Но какое это имеет отношение к обсуждаемому вопросу?

Какая разница, буду ли я вешать евенты или в каждом элементе прописывать реакцию на событие?

Разница в том что вам больше не нужно в js отслеживать изменение DOM, а событие нативно за вас развешивает браузер.

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

Ух, а это же игра в которую можно играть вдвоем: Это в моем случае менять только в одной вьюшке, а в вашем во всех сриптах.
На самом деле если надо менять в моем случае во вьюшках, то надо и в вашем, ведь ваши скрипты опираются на селекторы.
На самом деле развешивая события из js вы просто решили взять на себя часть нативной работы браузера. Это все равно что сверстать всю страницу дивами, а потом css'ом сделать где нужно инлайн элементы, а jsом эмулировать работу ссылок. А чо - можно же так, да?

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

чиво?