Event delegation

事件代理

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>                
</div>
<button>
    click to add more a
</button>

const div1 = document.getElementById('div1')
div1.addEventListener('click',e=>{
    const target = e.target
    if(e.nodeName === 'A'){
        alert(target.innerHTML)
    }
})

代码简洁

减少浏览器内存使用

但是不要滥用

通用的事件绑定函数

function bindEvent(elem,type,selector,fn){
    if(fn == null){
        fn = selector
        selector = null
    }
    elem.addEventListener(type,e=>{
        let target
        if(selector){
            //需要代理
            target = e.target
            if(target.matches(selector)){
                fn.call(target,e)
            }
        }else{
            //不需要代理
            fn.call(target,e)
        }
    })

}

描述事件冒泡的流程

1. 基于DOM树形结构
2. 事件会顺着触发元素向上冒泡
3. 应用场景：代理

无限下拉图片列表，如何监听每个图片的点击
1.事件代理
2.用e.target获取触发元素
3.用matches来判断是否判断元素