Объединяет ли браузер два одинаковых эвента в один?

Question

[godsplane]

document.addEventListener('click', function (e) {
  e.target == el ? alert('k') : null
})

document.addEventListener('click', function (e) {
  e.target == el2 ? alert('q') : null
})

Допускается ли такая конструкция или лучше писать все условия в одном документе?Как браузер реализует эти два эвента, объединяются ли они или работают отдельно друг от друга, как это сказывается на производительности или чем либо еще. Есть ли какие то подводные камни?

Answer 1

[Сергей Соколов]

// с заглавных букв ниже — сущности, которые стоит различать:

Событие (Event) и Слушатель события (Listener) — это разные штуки.

вот вы повесили два Слушателя на одно и то же Имя (или Тип) события на одном и том же Элементе. Это всё равно, что в один массив засунуть две функции. При наступлении События данного Типа, последовательно выполнятся все функции из «массива».

Юзер кликнул мышкой — браузер создал Событие с Типом "click". Клик отправляется в путешествие: начинает с document и ныряет глубже до того элемента на котором была мышка. Затем это же событие всплывает наверх, обратно, до document.

Где-то по пути Событие могут Слушать и Поймать (и не отпустить дальше). В вашем примере его поймают на document в конце обратного пути. И прогонят через строй Слушателей )