封装一个通用的事件绑定函数

通过上节案例来展开
案例
需要点击每个a，来。弹出他们的内容

<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;
    }
})

以上事件绑定函数bindEvent过与简单，我们需要进一步封装，减少使用时的代码：

// 通用的事件绑定函数 
// 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)
})