Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2015, 14:35
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

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

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);


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

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

и ещё, вдруг будет такой случай, предварительно спрошу если функция одна, но события разные, тогда лучше оставить как есть, или есть способ получше?
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2015, 15:54
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

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

Последний раз редактировалось Octane, 18.04.2015 в 16:00.
Ответить с цитированием
  #3 (permalink)  
Старый 18.04.2015, 16:04
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Делегирование событий и их папа zhurchik Events/DOM/Window 9 20.07.2016 22:25
Клонирование обработчиков событий NapalmRain Events/DOM/Window 9 14.11.2014 14:30
Динамическое делегирование событий в backbone ssnikolay Библиотеки/Тулкиты/Фреймворки 4 13.11.2012 08:47
Переопределение событий lispik jQuery 4 13.01.2011 11:30
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 18:03