Perfect JS event delegation

    function eventDelegate(element, eventType, selector, fn) {
    
        element.addEventListener(eventType, e => {
    
            let el = e.target;
            //  When the clicked element is not li Ben ⾝ When ,⽐ If you say span, Just look for ⽗ Whether level is li
            while (!el.matches(selector)) {
    
                //  Keep looking up ⽗ Level element , To determine if there is li label 
                if (element === el) {
    
                    //  Don't hold on until you find the proxy element ⾏ entrust 
                    el = null;
                    break;
                }
                el = el.parentNode;
            }
            el && fn.call(el, e, el);
        })
        return element;
    }

    eventDelegate(ul, 'click', 'li', function (e, el) {
    
        console.log(` Click. ${
     this} label `)
    })

ul.addEventListener('click', function() {
    
                    let el = e.target
                    while (el && !el.matches(selector)) {
    
                        el = el.parentNode
                        if (element === el) {
    
                            el = null
                        }
                    }
                    if (el) {
    
                        console.log(' Execute callback function ')
                    }
                }

Reference article
https://zhuanlan.zhihu.com/p/26986963