【重学JS】事件

事件模型：冒泡和捕获

事件绑定

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

const btn = document.getElementById('btn')
bindEvent(btn,'click',event => {
    console.log(event.target) // 获取触发的元素（本例：即btn）
    event.preventDefault() // 阻止默认行为
})

事件冒泡流程

1. 基于DOM树形结构
2. 事件会顺着触发元素向上冒泡

event.stopPropagation() // 阻止冒泡

冒泡的应用场景：事件代理

事件代理

代码简洁，提升网页性能

减少浏览器内存占用，但是不要滥用

通用的事件绑定函数（支持普通绑定和代理绑定）

function bindEvent(el,type,selector,fn) {
    if(fn == null) {
        fn = selector
        selector = null
    }
    el.addEventListener(type, e => {
        let target
        if(selector) {
            //需要事件代理
            target = e.target
            if(target.matches(selector)) {
                fn.call(target,e) //主要改变this的指向，使用方，可以用this.拿到对应的值
            }
        }else {
            //不需要代理
            // fn(e)
            fn.call(target,event)
        }
    })
}