js-web-API-事件

题目

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

<script>
    const btn=document.getElementById('btn')
    function bindEvent(elem,type,fn){//elem元素，type绑定的事件类型，fn事件触发
        elem.addEventListener(type,fn)
    }

    bindEvent(btn1,'click',event=>{

        event.preventDefault();//阻止默认行为，event--->btn1
        alert('clicked')
    })
</script>

描述事件冒泡的流程

• 基于DOM的树形结构

• 事件会顺着触发元素往上冒泡

• 应用场景：代理
  

• 无限下拉的图片列表，如何监听每个图片的点击？

事件代理

当子元素过多，可以把事件代理给父元素处理

• 代码简洁
• 减少浏览器内存占用
• 但是不要滥用（使用瀑布流）

通用事件绑定函数

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

// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)
})

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