Самый простой и часто используемый пример - это делегирование событий. Вы устанавливаете один обработчик событий на родительский элемент, а внутри проверяете реальный целевой элемент события и реагируете соответствующим образом.
Это позволяет не только экономить память (один обработчик вместо многих), но и обрабатывать события на динамически создаваемых элементах, не назначая для них обработчик руками.
А вот простой пример использования нескольких обработчиков одного и того же события:
Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.
Зачастую прекращение всплытия создаёт свои подводные камни, которые потом приходится обходить.
Например:
Мы делаем меню. Оно обрабатывает клики на своих элементах и делает для
них stopPropagation. Вроде бы, всё работает.
Позже мы решили отслеживать все клики в окне, для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Например, Яндекс.Метрика так делает, если включить соответствующую опцию.
Над областью, где клики убиваются stopPropagation, статистика работать не будет! Получилась «мёртвая зона». Проблема в том, что stopPropagation убивает всякую возможность отследить событие сверху, а это бывает нужно для реализации чего-нибудь «эдакого», что к меню отношения совсем не имеет.
Источник