实现一个通用事件绑定函数(可以支持事件代理)

function bindEvent(elem, type, selector, fn) {
    if(fn == null) { //如果没传selector，则默认第三个参数为fn
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if(selector) { // 如果传入了selector，则说明是事件代理模式
            if(target.matches(selector)) {
                fn.call(target, event)
            }else { // 否则是普通绑定模式
                fn.call(target, event)
            }
        }
    })
}

举例：

<div>
    <a class="a1">1</a>
    <a>2</a>    
    <a>3</a>
    <button>4</button>
</div>

<script>
    // 普通监听
    const a1 = document,querySelector('.a1')
    bindEvent(a1, 'click', function(event) {
        event.preventDefault()
        console.log(this.innerHTML) // 1
    })
    // 事件代理
    const div = document.querySelector('div')
    bindEvent(div, 'click', 'a', function(event) {
        event.preventDefault()
        console.log(this.innerHTML) // 结果依次为 1 2 3 (button没有被监听)
    })

</script>