事件委托

事件委托

首先，有两个问题
问题一：
有一个瀑布流布局，上面有数以千计的图片，当点击某一张图片的时候就预览该张图片，你会怎么添加点击事件？
问题二：
如果有个业务让你监听目前不存在的元素的点击事件，这个时候该怎么做？

针对问题一，可以监听所有图片的祖先元素，等冒泡的时候判断target是不是这些张图片的某一张
针对问题二，先监听祖先，等点击的时候看看是不是我想要的监听元素即可

这样，事件委托的优点就显而易见了

1. 可以节省监听数目，节省了内存。
2. 可以监听动态元素

封装一个事件委托

    function on(eventType, element, selector, fn) {
        // 判断element是不是Element的实例
        // 如果不是，是字符串的话，先获取到该元素
        if (!(element instanceof Element)) {
            element = document.querySelector(element)
        }
        // 给元素监听事件
        element.addEventListener(eventType, (e) => {
            // 获取到用户操作的目标元素
            let el = e.target
            // 判断el是不是满足selector
            while (!el.matches(selector)) {
                // 如果el最终找到了用于委托的元素element，则中断寻找.因为找到头了
                if (element === el) {
                    el = null
                    break
                }
                // 如果el不满足selector,则向上找
                el = el.parentNode
            }
            // el满足selector, 执行fn
            el && fn.call(el, e, el)

        })
    }

JS支持事件吗

不支持，JS只是调用了DOM提供的addEventListener而已