Множественная обработка событий
 

Здравствуйте!
Скажите пожалуйста, имею несколько событий mousedown на странице, как их лучше оформить для наилучшей производительности?
Оставить как есть все раздельно:

item-1.addEventListener('mousedown' ..
item-2.addEventListener('mousedown' ..

Или лучше объединить:

document.addEventListener('mousedown' ..
    if (event.target.classList.contains("item-1"))
    if (event.target.classList.contains("item-2"))

Nlk,
Зачастую лучше объединять, особенно если действия для ряда элементов однотипные.
Да и код более читабельный, имхо.

Dilettante_Pro,
спасибо

Мое имхо противоположное, если lisneter'ы в куче хранить, читабельность пострадает.

item-1.addEventListener('mousedown',e=>{
    alert('Im first item');
});

item-2.addEventListener('mousedown',e=>{
    alert('Im second item');
});

document.addEventListener('mousedown',e=>{
    if (event.target.classList.contains("item-1")){
        alert('Im first item');

    }else if (event.target.classList.contains("item-2"))
        alert('Im second item');
});

Nexus,
спасибо.

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

Nlk, я про читабельность писал, производительнее будет когда все в куче.
В обоих случаях обработчики будут "вызваны" по очереди.

Делегирование обработчика события самому документу производительности не прибавит, а даже на оборот, т.к. обработчик будет вызываться каждый раз, как произойдет событие на любом из его дочерних элементов (если событие всплывет к document).
Лучше делегировать обработчик ближайшему общему родителю.

Разница пренебрежимо мала. Такие вещи должны определяться исключительно семантикой кода. Если в обработчике много общих действий - вешаешь один. Если обработчики уникальны - вешаешь каждый отдельно.

Nexus,
Aetae,
спасибо

Мне кажется, это интересные рассуждения:
https://softwareengineering.stackexc...s-more-complex

https://davidwalsh.name/event-delegate

--
У яндекса в поисковике, мне так показалось, что у них глобальный слушатель.

Вообще глобальный слушатель глобальному слушателю тоже рознь. Например при ООП очень удобно вешать обработчиком не функцию, а сам объект, тогда все события валятся в метод handlEvent этого объекта и разруливаются уже внутри.
Получается с одной стороны функция обработчик вроде как одна, с другой вешается из разных мест и на разные элементы.)