Лучше оставить как есть. Мало ли кому понадобиться зачем-то использовать stopImmediatePropagation, или одна из функций выкинет exception и все остановится, если все функции синхронно будут вызываться в одном слушателе. Да и теряется возможность удалить конкретный слушатель.
А вот по поводу делегирования не все так просто, тебе же понадобится проверять, подходит ли event.target для твоих действий.
Например:
<div class="toolbar">
<span class="button button-copy">
<span class="icon icon-copy"></span>
</span>
<span class="button button-cut">
<span class="icon icon-cut"></span>
</span>
<span class="button button-paste">
<span class="icon icon-paste"></span>
</span>
</div>
var anotherParent = document.querySelector('.toolbar');
// Тебе нужен клик по .button-copy
anotherParent.addEventListener('click', function (event) {
// Пользователь кликнул по .icon-copy
this // → anotherParent
event.currentTarget // → anotherParent
event.target // → span.icon-copy
// Как тут определить, что это клик по .button-copy?
// Рекурсивно проверять parentNode.classList.contains('button-copy')?
// Планируешь это в каждой функции реализовывать?
});
Я бы сделал это следующим образом:
function createListener(selector, callback) {
selector += ',' + selector + ' *';
return function (event) {
if (event.target.matches(selector)) {
callback(event);
}
};
}
anotherParent.addEventListener('click', createListener('.button-copy', fn4));