Можно ли в jQuery через делегирование отследить событие на объекте?

Question

[Alex Pts]

В jQuery есть метод .on(), который может делегировать событие на передаваемый параметр selector.

Пример того что хочу сделать:

$.fn.pluginName= function () {
   this.each(function () {
       $(document).on('change', this, someHandler);
   });
   return this;
};

$('#someNode').pluginName();

Обработчик someHandler ловит событие change на посторонних элементах, т.к. метод .on() по документации строковый selector ждет, а не объект, хотя ошибок не выкидывает.

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

Answer 1

[Александр Кит]

Как вариант:

$.fn.pluginName = function(handler) {

    var self = this;

    $(document)
        .on('change', function(event) {
            if (self.index(event.target) === -1)
                return;
    
            handler(event);
        });

    return this;
};

Comments

[Alex Pts]

Намного лучше :)
Но если мы наш метод над коллекцией вызываем, то придется немного усложнить проверку текущего элемента. Однозначно +1 в карму

[Николай Васильчук]

> var self = this;
Хочется плакать...

[Александр Кит]

@AlexPTS Если вызываем `pluginName()` над коллекцией, то `.index(event.target)` именно для этого. Будет посложнее, если `target` - это ребёнок одного из элементов из сэта(но это надо исходить из спец. - кто посылает `change`)

@Anonym Вы или плачьте молча, или пишите более развёрнутые комментарии. Вас смутило замыкание или имя алиаса? И что хотели бы видеть?

[Alex Pts]

@tenbits Да, сегодня через $(self).is(e.target) уже сделал, все ок :)

Answer 2

[Константин Китманов]

А каков сакральный смысл отлова события на document в данном случае?

$.fn.pluginName= function () {
   this.each(function () {
       $(this).on('change', someHandler);
   });
   return this;
};

Если вы хотите заюзать делегирование событий из соображений производительности, то и это можно сделать проще:

(function ($) {
    'use strict';

    function someHandler (evt) {
        console.log(evt.target);
    }

    $(function () {
        $(document).on('change', '[data-my-plugin]', someHandler)
    });

    $.fn.myPlugin = function () {
        this.each(function () {
            $(this).attr('data-my-plugin', '')
        });
    }
}(jQuery));

//...

$('#someNode').myPlugin();

Что же до передачи this вторым параметром — то jQuery проверяет, является ли второй параметр строкой, и если нет, то вызов будет равнозначен такому:

$(document).on('change', undefined, this, someHandler);

Answer 3

[Alex Pts]

А каков сакральный смысл отлова события на document в данном случае?

Да, вы правы, у нас получается по сути тоже самое, что мы просто на объект навесим обработчик по сути.
Хотя если проверить элемент на котором произошло событие не только по селектору, а по набору элементов, то слушатель то у нас один все равно, просто он проверят наличие в некотором множестве. Думаю, что смысл делегирования все равно имеет место быть с точки зрения как производительности, так и работы с динамической моделью DOM.

$(document).on('change', '[data-my-plugin]', someHandler)

Думал об атрибуте, но это как-то кастыльно выглядит, пока ищу более нативное и элегантное решение, если не найду, то буду использовать что-то такое.

В вашем примере, я так понимаю, нельзя будет назначить разные обработчики, если мы вызовем свой метод myPlugin() на 2 разных наборах. Чтобы первый вызов один обработчик имел, а второй свой. Тогда для них придется selector уникальный составлять на каждый вызов. Это не гибко.

Возможно есть простой вариант не с использованием jQuery, это не принципиально.