делегирование событий
 

добрый день, на странице очень много элементов на которые нужно повесить обработчик событий, поэтому использую делегирование событий, в результате появляется такая картина:

function fn1() {}
function fn2() {}
function fn3() {}
function fn4() {}
function fn5() {}
function fn6() {}
function fn7() {} // и т.д

parent.addEventListener('click', fn1);
parent.addEventListener('click', fn2);
parent.addEventListener('click', fn3); // и т.д

// -------

anotherParent.addEventListener('click', fn4);
anotherParent.addEventListener('focus', fn5);
anotherParent.addEventListener('mouseover', fn6);
anotherParent.addEventListener('change', fn7); // и т.д

для одном случае событие одно, но много функций, думаю их лучше объединить в одну общую, и запускать уже его, как-то так:

function fnCommon() {
    function fn1() {} fn1();
    function fn2() {} fn2();
    function fn3() {} fn3();
}

parent.addEventListener('click', fnCommon);

стоит ли так делать, или есть способ получше? или лучше вообще оставить как есть?

-------
в другом случае и функции разные, и события, что с ним можно поделать? иди опять же, может лучше так оставить?

и ещё, вдруг будет такой случай, предварительно спрошу :) если функция одна, но события разные, тогда лучше оставить как есть, или есть способ получше?

Лучше оставить как есть. Мало ли кому понадобиться зачем-то использовать 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));

понял, спасибо за совет)

да, знаю, так и делаю, внутри каждой функции проверяю, а вашу функцию беру на заметку :) в моём случае оно не подходит, для разных элементов разная проверка) хотя попробую поиграться :)