SOURCE

/**
 * 事件代理，把方法绑定再父元素上再去判断 场景 瀑布流 无线加载
 */

<div id="div">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <button >123</button>
</div>
    <button id="btn">123</button>
<script>
    function bindEvent(elem, type, selector, fn) {
        if (fn == null) {
            fn = selector
            selector = null
        }
        const target = elem.target
        elem.addEventListener(type, event => {
            const target = event.target
            if (selector) {
                if (target.matches(selector)) {
                    fn.call(target, event)
                }
            } else {
                fn.call(target, event)
            }
        })
    }
    const btn = document.getElementById('btn')
    bindEvent(btn, 'click', function(event) {
        alert(this.innerText)
    })
    const div = document.getElementById('div')
    bindEvent(div, 'click', 'a', function(event) {
        event.preventDefault()
        alert(this.innerText)
    })
</script>