11-JS-WEB-API 事件-一一网

事件绑定和事件冒泡

题目

- 编写一个通用的事件监听函数
- 描述事件冒泡的流程
- 无限下拉的图片列表，如何监听每个图片的点击？
复制代码

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

function bindEvent(elem,type,selector,fn){
    if(fn == null){//传三个参数和四个参数的处理
        fn = selector;
        selector = null;
    }
    elem.addEventListener(type, event=>{
        let target;
        if(selector){
            //需要代理
            target = event.target;
            if(target.matches(selector)){
                fn.call(target,event)
            }else{
                //不需要代理
                fn.call(target,event)
            }            
        }
    })
}
复制代码

描述事件冒泡的流程
- 基于DOM树形结构
- 事件会顺着触发元素往上冒泡
- 应用场景：代理
无限下拉的图片列表，如何监听每个图片的点击？
- 事件代理
- 用e.target获取触发元素
- 用matches来判断是否是触发元素

知识点

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

事件绑定

const btn = document.getElementById('btn1')
btn.addEventListener('click',event =>{
    console.log('clicked')
})


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

const a = document.getElementById('link1')
bindEvent(a,'click',e=>{
    console.log(e.target) //获取触发的元素
    e.preventDefault()//阻止默认行为
    alert('clicked')
})

复制代码

事件冒泡

<body>
    <div id="div1">
        <p id="p1">激活</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
    <div id="div2">
        <p id="p5">取消</p>
        <p id="p6">取消</p>
    </div>
</body>
<script>
    //通用的绑定函数
    function bindEvent(elem,type,fn){
        elem.addEventListener(type,fn)
    }
    
    const p1 = document.getElementById('p1')
    const body = document.body;
    binEvent(p1,'click',e=>{
        e.stopPropagation();//阻止冒泡，注释掉这一行来体会事件冒泡
        alert('激活')
    })
    bindEvent(body,'click',e=>{
        alert('取消')
    })
</script>
复制代码

事件代理

事件代理是基于事件冒泡的,绑定父元素上通过子元素冒泡查看是否是想要的元素

特点：代码简洁，减少浏览器内存占用，但是不要滥用

<div id="div3">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <button>加载更多</button>
</div>
<button>点击增加一个a标签</button>

<script>
    //通用的绑定函数
    function bindEvent(elem,type,fn){
        elem.addEventListener(type,fn)
    }

    const div3 = document.getElementById('div3')
    bindEvent(div3,'click',event =>{
        event.preventDefault()//阻止默认行为
        const target = event.target
        if(target.nodeName === 'A'){
            alert(target.innerHTML)
        }
    })
    /*div3.addEventListener('click', e=>{
        event.preventDefault()//阻止默认行为
        const target = e.target;
        if(e.nodeName === 'A'){
            alert(target.innerHTML)
        }
    })*/
    
    

</script>
复制代码

通用的事件绑定函数

    //通用的绑定函数
    function bindEvent(elem,type,fn){
        elem.addEventListener(type,fn)
    }
    
    //普通事件绑定
    const btn1 = document.getElementById('btn1');
    bindEvent(btn1,'click',event =>{
        //console.log(event.target) //获取触发的元素
        enent.preventDefault() //阻止默认行为
        alert('clicked')
    }

    //代理事件绑定
    const div3 = document.getElementById('div3')
    bindEvent(div3,'click',event =>{
        event.preventDefault()//阻止默认行为
        const target = event.target
        if(target.nodeName === 'A'){
            alert(target.innerHTML)
        }
    })
复制代码

将上面通用函数改成下面的通用函数：

    //通用的绑定函数
    function bindEvent(elem,type,selector,fn){
        if(fn == null){//传三个参数和四个参数的处理
            fn = selector;
            selector = null;
        }
        elem.addEventListener(type, event=>{
            let target;
            if(selector){
                //需要代理
                target = event.target;
                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) //获取触发的元素
        enent.preventDefault() //阻止默认行为
        alert(this.innerHTML)
        //如果用箭头函数，则用下面语句
        //alert(btn1.innerHMTL)
    }

    //代理事件绑定
    const div3 = document.getElementById('div3')
    bindEvent(div3,'click','a',function(event){
        event.preventDefault()//阻止默认行为
        alert(this.innerHTML)
        //如果用箭头函数，则用下面语句
        //alert(event.target.innerHMTL)
    })
复制代码