Event 事件

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

事件绑定

事件冒泡

事件代理

事件绑定

const btn = document.getElementById('btn')
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=>{

e.preventDefault() //阻止默认行为
alert('clicked')

})

console.log('event.js');
function bindEvent(elem,type,fn){
    elem.addEventListener(type,fn)
}
const btn1 = document.getElementById('btn1');
bindEvent(btn1,'click',event=>{
    //console.log(event.target) //获取触发元素
    event.preventDefault()//组织默认行为
    alert('clicked')
})

事件冒泡

<body>
    <div>
        <p id="p1">激活</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
    <div>
        <p id="p5">取消</p>
        <p id="p6">取消</p>
    </div>
</body>


const p1 = document.getElementById('p1')
const body = ducoment.body
bindEvent(p1,'click',e=>{
    e.stopPropagation()//注释掉这一行来体会事件冒泡
    alert('激活')
})
bindEvent(body,'click',e=>{
    alert('取消')
})