JavaScript学习笔记七

事件❤❤❤

一、编写一个通用的事件监听函数

== answer==
这个和下面的 知识点 讲解的 bindEvent 区别在于 ，下面那个没有考虑到代理的问题 ，而它结合啦 普通绑定 和 代理绑定

// 通用的事件绑定函数
function bindEvent(elem, type, selector, fn) {
   
    if (fn == null) {
   
    //这种情况就是 普通绑定
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
   
        const target = event.target			// 触发的元素信息
        if (selector) {
   
            // 代理绑定 触发的元素 是否符合 selector 这个选择器 ，eg：当selector 是a时 ，若触发的元素不是a标签就不符合
            if (target.matches(selector)) {
   
            // 判读
                fn.call(target, event)
            }
        } else {
   
            // 普通绑定
            fn.call(target, event)
        }
    })
}

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

// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1