Функция делегирования

Напишите функцию для удобного делегирования.

Способ вызова:

delegate(container, eventName,  // элемент, событие
  function(elem) { ... }, // селектор
  function(e) { ... } // действие
);

Функция должна вешать обработчик container.oneventName, при срабатывании искать ближайший elem, для которого функция-селектору возвратит true, и вызывать на нём функцию-действие с правильным this.

Пример использования:

delegate(table, 'click',  // элемент, событие
  function(elem) { return elem.tagName == 'TD'; }, // селектор
  function(e) { randomizeColor(this); } // изменить цвет TD
);

В примере ниже функция использована для обработки кликов на ячейках таблицы. Она меняет цвет ячейки на красный и обратно:

Обратите внимание, ячейка может содержать вложенные элементы.

Исходный документ (есть всё, кроме вашей функции delegate): tutorial/browser/events/delegate-src.html.

Решение

Данное решение поддерживает только один обработчик на элемент, т.к. реализовано через onсобытие:

function delegate(elem, eventName, selectorFunc, handler) {
  elem['on'+eventName] = function(e) {

    var target = e && e.target || e.srcElement;

    while(target != this) {
      if (selectorFunc(target)) {
        return handler.call(target, e); // (*)
      }
      target = target.parentNode;
    }

  }
}

Важно:

Обработчик в строке (*) вызывается в контексте target, ему передаётся объект события e, содержащий информацию о произошедшем.
Возвращаем результат обработчика, так что return false из него сработает.

Итоговый документ с ним: tutorial/browser/events/delegate.html.

Если нужно более одного события одного типа на элемент, то delegate можно переписать с использованием addEventListener/attachEvent, например так: tutorial/browser/events/delegate2.html

#416

Функция делегирования

Реклама

Нашли опечатку?

Последние Комментарии

Помоги другим!