web-utils-curd/src/EventTool.ts

前端工具包

interface Listener {
    (e: Event): Event
}
class EventTool {
    addEventListener(el: HTMLElement, type: string, fn: Listener, selector: string) {
        // 判断 el 的类型
        if (typeof el === "string") {
            el = document.querySelector(el)!;
        }
        // 事件绑定, 若没有传递子元素的选择器，则给 el 绑定事件
        if (!selector) {
            el.addEventListener(type, fn);
        } else {
            el.addEventListener(type, (e) => {
                // 获取点击的目标事件源
                const target: HTMLElement = e.target as HTMLElement;
                // 判断当前点击的元素与选择器是否相符合
                if (target.matches(selector)) {
                    // 如符合，则调用回调
                    fn.call(target, e);
                }
            });
        }
    }
}

export default new EventTool();