Encapsular una función de enlace de eventos general

Utilice el caso de la sección anterior para ampliar el
caso.
Debe hacer clic en cada uno de los siguientes. Mostrar su contenido

<div id="div3">
    <a href="#">a1</a><br>
    <a href="#">a2</a><br>
    <a href="#">a3</a><br>
    <a href="#">a4</a><br>
    <button id='btn1'>加载更多...</button>
</div>
// 封装通用的事件绑定函数
function bindEvent(elem, type, fn) {
    
    
    elem.addEventListener(type, fn)
}

//获取父元素
const fu = document.getElementById('div3')
bindEvent(fu, 'click', function (event) {
    
    
    // console.log(event.target) // 获取触发的元素
    let target=event.target
    event.preventDefault() // 阻止默认行为
    //过滤符合条件的子元素，主要是过滤掉 加载更多 
    if(target.nodeName.toLowerCase()==="A"){
    
    
        alert(target.innerHTML;
    }
})

La función de enlace de eventos anterior bindEvent es simple y simple, necesitamos encapsular aún más para reducir el código cuando usamos:

// 通用的事件绑定函数 
// function bindEvent(elem, type, fn) {
    
    
//     elem.addEventListener(type, fn)
// }

function bindEvent(elem, type, selector, fn) {
    
    
    //首先判断有没有第四个参数
    if (fn == null) {
    
    
        fn = selector //没有第四个参数，第三个参数即为事件函数
        selector = null //第三个指向空
    }
    elem.addEventListener(type, event => {
    
    
        const target = event.target
        if (selector) {
    
     //参数三判断 普通绑定 和代理绑定
            // 代理绑定
            if (target.matches(selector)) {
    
    
               /*
               let result = element.matches(selectorString);
				result 的值为 true 或 false.
				selectorString 是个css选择器字符串.
               */
                fn.call(target, event)
            }
        } else {
    
    
            // 普通绑定
            fn.call(target, event)
        }
    })
}

// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    
    
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)
})

// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    
    
    event.preventDefault()
    alert(this.innerHTML)
})