事件事件绑定事件冒泡事件代理事件绑定事件冒泡事件代理升级绑定事件代码需求：

事件绑定
事件冒泡
事件代理

事件绑定

    // 获取元素
    const btn = document.getElementById('btn')
    // 1.绑定点击事件
    btn.addEventListener('click', event=>{
        console.log('btn clicked')
    })
    
    // 2.通用事件绑定
    function bindEvent(ele,type,fn){\
        ele.addEventListener(type, fn)
    }
    
    // 调用
    bindEvent(btn,'click'e=>{
        e.preventDefault() // 阻止默认行为
        alert('btn clicked')
    })

事件冒泡

    <body>
        <div id="d1">
            <p>激活</p>
            <p>取消</p>
        </div>
        <div id="d2">
            <p>取消</p>
            <p>取消</p>
        </div>
    </body>
    <!--
        给body一个绑定事件，点击div获取p标签都会触发该事件 
        那么，p标签自身如果也有事件，那就会触发多个事件，所以事件冒泡是指
        最里层的元素具有外层元素的事件
    -->

    // 所以需要自己就用自己的事件，这样不乱套，阻止冒泡事件
    bindEvent(btn,'click',event=>{
        event.stopPropagation() // 阻止冒泡
    })

事件代理

    <div id="di">
        <a>aaa1</a>
        <a>aaa2</a>
        <a>aaa3</a>
        <button>but</button>
    </div>
    <button>点击增加一个a标签</button>
    <!--
        增加一个标签a，就会有一个点击事件
        所以把点击事件写在div，当增加的a标签后，会冒泡冒到div上
        这样div就代理了a标签的点击事件
        但是，点击button也会冒泡，所以需要进一步做判断
    -->

    const div = document.getElementById("di")
    bindEvent(div,'click',event=>{
        event.preventDefault()
        if(event.target.nodeName === 'A'){
            alert(event.target.innerHTML) // ...todo
        }
    })

升级绑定事件代码

需求：

1、支持普通绑定
2、支持代理绑定

    function (ele,type,selector,fn){
        if(fn==null){
            fn = selector
            selector = null
        }
        ele.addEventListener(type,funtion(event){
            const target = event.target
            if(selector){       // 代理绑定
                if(target.matches(selector)){
                    fn.call(target,event)
                }
            }else{              // 普通绑定
                fn.call(target,event)
            }
    })
    }