Как работает jQuery.on()?

Ответ 1

Я предполагаю, что ваш вопрос о делегировании делегирования версии .on.

В JavaScript большинство событий bubble находятся в иерархии DOM. Это означает, что когда событие, которое может создать пузырьки для одного элемента, оно достигнет уровня DOM до уровня document.

Рассмотрим эту основную разметку:

<div>
   <span>1</span>
   <span>2</span>
</div>

Теперь мы применяем делегирование событий:

$('div').on('click', 'span', fn);

Обработчик события привязан только к элементу div. Поскольку span находится внутри div, любой щелчок в пролетах будет пузыриться до div, активируя обработчик кликов div. В этот момент все, что осталось, проверяет, будет ли event.target (или любой из элементов между объектом и delegateTarget) соответствует целевому селектору делегирования.

Сделайте немного сложнее:

<div id="parent">
    <span>1</span>
    <span>2 <b>another nested element inside span</b></span>
    <p>paragraph won't fire delegated handler</p>
</div>

Основная логика такова:

//attach handler to an ancestor
document.getElementById('parent').addEventListener('click', function(e) {
    //filter out the event target
    if (e.target.tagName.toLowerCase() === 'span') {
        console.log('span inside parent clicked');
    }
});

Хотя приведенное выше не будет соответствовать, если event.target вложен в ваш фильтр. Нам нужна итерационная логика:

document.getElementById('parent').addEventListener('click', function(e) {
    var failsFilter = true,
        el = e.target;
    while (el !== this && (failsFilter = el.tagName.toLowerCase() !== 'span') && (el = el.parentNode));
    if (!failsFilter) {
        console.log('span inside parent clicked');
    }
});

Fiddle

edit: обновленный код для соответствия только элементам потомка, как это делает jQuery .on.

Примечание. Эти фрагменты предназначены для пояснения, а не для использования в реальном мире. Если вы не планируете поддерживать старый IE, конечно. Для старого IE вам нужно будет протестировать тест addEventListener/attachEvent, а также event.target || event.srcElement и, возможно, некоторые другие причуды, такие как проверка того, передан ли объект события функции обработчика или доступен в глобальной области. К счастью, jQuery делает это без проблем за кулисами для нас. =]

Ответ 2

Некроминанты:
На всякий случай кому-то нужно заменить JQuery на/с Vanilla-JavaScript:

TypeScript:

/// attach an event handler, now or in the future, 
/// for all elements which match childselector,
/// within the child tree of the element maching parentSelector.
export function subscribeEvent(parentSelector: string | Element
    , eventName: string
    , childSelector: string
    , eventCallback)
{
    if (parentSelector == null)
        throw new ReferenceError("Parameter parentSelector is NULL");

    if (childSelector == null)
        throw new ReferenceError("Parameter childSelector is NULL");

    // nodeToObserve: the node that will be observed for mutations
    let nodeToObserve: Element = <Element>parentSelector;
    if (typeof (parentSelector) === 'string')
        nodeToObserve = document.querySelector(<string>parentSelector);


    let eligibleChildren: NodeListOf<Element> = nodeToObserve.querySelectorAll(childSelector);

    for (let i = 0; i < eligibleChildren.length; ++i)
    {
        eligibleChildren[i].addEventListener(eventName, eventCallback, false);
    } // Next i 

    // https://stackoverflow.com/info/2712136/how-do-i-make-this-loop-all-children-recursively
    function allDescendants(node: Node)
    {
        if (node == null)
            return;

        for (let i = 0; i < node.childNodes.length; i++)
        {
            let child = node.childNodes[i];
            allDescendants(child);
        } // Next i 

        // IE 11 Polyfill 
        if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;

        if ((<Element>node).matches)
        {
            if ((<Element>node).matches(childSelector))
            {
                // console.log("match");
                node.addEventListener(eventName, eventCallback, false);
            } // End if ((<Element>node).matches(childSelector))
            // else console.log("no match");

        } // End if ((<Element>node).matches) 
        // else console.log("no matchfunction");

    } // End Function allDescendants 


    // Callback function to execute when mutations are observed
    let callback:MutationCallback = function (mutationsList: MutationRecord[], observer: MutationObserver)
    {
        for (let mutation of mutationsList)
        {
            // console.log("mutation.type", mutation.type);
            // console.log("mutation", mutation);

            if (mutation.type == 'childList')
            {
                for (let i = 0; i < mutation.addedNodes.length; ++i)
                {
                    let thisNode: Node = mutation.addedNodes[i];
                    allDescendants(thisNode);
                } // Next i 

            } // End if (mutation.type == 'childList') 
            // else if (mutation.type == 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.');

        } // Next mutation 

    }; // End Function callback 

    // Options for the observer (which mutations to observe)
    let config = { attributes: false, childList: true, subtree: true };

    // Create an observer instance linked to the callback function
    let observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(nodeToObserve, config);
} // End Function subscribeEvent 

JavaScript:

 /// attach an event handler, now or in the future, 
    /// for all elements which match childselector,
    /// within the child tree of the element maching parentSelector.
    function subscribeEvent(parentSelector, eventName, childSelector, eventCallback) {
        if (parentSelector == null)
            throw new ReferenceError("Parameter parentSelector is NULL");
        if (childSelector == null)
            throw new ReferenceError("Parameter childSelector is NULL");
        // nodeToObserve: the node that will be observed for mutations
        var nodeToObserve = parentSelector;
        if (typeof (parentSelector) === 'string')
            nodeToObserve = document.querySelector(parentSelector);
        var eligibleChildren = nodeToObserve.querySelectorAll(childSelector);
        for (var i = 0; i < eligibleChildren.length; ++i) {
            eligibleChildren[i].addEventListener(eventName, eventCallback, false);
        } // Next i 
        // https://stackoverflow.com/info/2712136/how-do-i-make-this-loop-all-children-recursively
        function allDescendants(node) {
            if (node == null)
                return;
            for (var i = 0; i < node.childNodes.length; i++) {
                var child = node.childNodes[i];
                allDescendants(child);
            } // Next i 
            // IE 11 Polyfill 
            if (!Element.prototype.matches)
                Element.prototype.matches = Element.prototype.msMatchesSelector;
            if (node.matches) {
                if (node.matches(childSelector)) {
                    // console.log("match");
                    node.addEventListener(eventName, eventCallback, false);
                } // End if ((<Element>node).matches(childSelector))
                // else console.log("no match");
            } // End if ((<Element>node).matches) 
            // else console.log("no matchfunction");
        } // End Function allDescendants 
        // Callback function to execute when mutations are observed
        var callback = function (mutationsList, observer) {
            for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
                var mutation = mutationsList_1[_i];
                // console.log("mutation.type", mutation.type);
                // console.log("mutation", mutation);
                if (mutation.type == 'childList') {
                    for (var i = 0; i < mutation.addedNodes.length; ++i) {
                        var thisNode = mutation.addedNodes[i];
                        allDescendants(thisNode);
                    } // Next i 
                } // End if (mutation.type == 'childList') 
                // else if (mutation.type == 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.');
            } // Next mutation 
        }; // End Function callback 
        // Options for the observer (which mutations to observe)
        var config = { attributes: false, childList: true, subtree: true };
        // Create an observer instance linked to the callback function
        var observer = new MutationObserver(callback);
        // Start observing the target node for configured mutations
        observer.observe(nodeToObserve, config);
    } // End Function subscribeEvent