пример - модальное окно с бэкдропом (примечание, это просто пример. Обычно это делают через stopPropogation).
<div class="container">
<button class="child">Close</button>
</div>
document.addEventListener('click', function (e) {
if (e.doNotClose) {
return false;
}
// закрываем модальное окно
}, true);
document.querySelector('container').addEventListener('click', function(e) {
// просим обработчик кликов на документе не закрывать окно
e.doNotClose = e.hasOwnProperty('doNotClose') ? e.doNotClose : true;
});
document.querySelector('button').addEventListener('click', function (e) {
// просим обработчик кликов на контенере не мешать третьему обработчику закрывать окно
e.doNotClose = false;
});
Основная соль - всплытие событий и то, что один и тот же объект передается во все обработчики. которые задействованы в обработке этого события.
В 99% случаев обычно все работают с preventDefault и stopPropogation. На и еще можно в таком случае использовать: у нас есть десяток ктопок, на каждом свой обработчик. Итоговое действие одно, отправить куда-то данные или что-то сделать, причем сами обработчики не знают что, их задача только данные подготовить. А обработчик контейнера, в котором эти кнопки, принимает данные и уже с ними что-то делает. События всплывают всегда вверх, обработчики так же вызываются в поредке вложенности элементов, на которые они навешаны.
