事件代理封装事件代理是前端开发很有必要学会的，以下封装了一个bindEvent实现代理。事件代理是前端开发很有必要学会的

事件代理是前端开发很有必要学会的，以下封装了一个bindEvent实现代理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <a href="#">1</a></br>
    <a href="#">2</a></br>
    <a href="#">3</a></br>
    <a href="#">4</a></br>
    <p>此处省略无数条</p>
    <button>更多</button>
</div>
<script>
    // document.getElementById('div').addEventListener('click',e =>{
    //     e.preventDefault()
    //     if (e.target.nodeName === 'A'){
    //         alert(e.target.innerText)
    //     }
    // })

    bindEvent(document.getElementById('div'),'click','a',function(e){
        //注意此处不能使用箭头函数，否则this就指向window了
        console.log(this.innerHTML)
    })

    //自定义事件绑定函数  selector ==> a  div  p  处理代理情况
    function bindEvent(elem,type,selector,fn){
        if (fn == null){
            fn = selector
            selector = undefined
        }
        elem.addEventListener(type,e =>{
            const target = e.target
            if (selector){
                //代理绑定
                if (target.matches(selector)){
                    fn.call(target,e)
                }
            }else{
                //普通绑定
                fn.call(target,e)
            }
        })
    }
</script>
</body>
</html>