js實現事件委派

事件委派

事件委派，通俗的說就是將元素的事件委托給它的父級或者更外級的元素處理，它的實現機制就是事件冒泡。

        // 使用函數封裝事件委派功能
        //第一個參數是被事件委派元素也就是(事件委派者的父元素)
        //第二個參數是事件的類型比如'click'事件
        //第三參數是事件委派者元素的選擇器
        //第四個參數是事件執行函數
        function delegate(element, eventType, selector, fn) {
            // 給被事件委派元素注冊事件
            element.addEventListener(eventType, e => {
                //獲取到觸發這個事件的元素對象
                let el = e.target;
                //使用循環去判斷el元素是不是選擇器元素
                //如果el不是選擇器元素則將el的上一級父元素賦值給el
                //直到el的父元素是選擇器類型的元素或el的父元素到達事件邊界也就是到達element元素的時候結束循環
                while (!el.matches(selector)) {
                    // el等於element元素,代表觸發事件的元素不是事件委派者元素
                    if (element === el) {
                       el = null;
                       break;
                    }
                    el = el.parentNode;
                }
                //如果el=null,則未在事件委派者元素上觸發事件,則不執行事件函數
                //否則使用函數原型上的call方法執行事件函數,
                //使用call的形式執行可以使事件函數參數更靈活的設置
                el && fn.call(el, e, el)
            });
            //返回被事件委派元素對象,也可以不返回;
            return element
        }

以上內容的編寫參考自：https://juejin.im/post/5e739534e51d4526f23a4150