- 编写一个通用的事件监听函数
// 默认的事件绑定
const p1 = document.getElementById('p1')
p1.addEventListener('click',event=>{
console.log('clicked')
})
// 通用的绑定函数
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
const a = document.getElementById('a')
bindEvent(a,'click',event=>{
event.preventDefault(); // 阻止默认行为 (a标签跳转就是默认行为)
// event.stoPropagation(); // 阻止冒泡
console.log('clicked')
})
- 描述事件冒泡的流程
- 绑到大的元素上的事件,元素内的元素上事件也会触发上层元素事件
![](https://static01.imgkr.com/temp/9e5ab8f4130b419b87275eed8ed5de16.png)
- 无线下拉的图片列表(瀑布流),如何监听每个图片的点击
- 事件代理:通过冒泡机制,将点击事件绑定到图片列表的父级上;优点:代码更简洁,减少浏览器内存,但不可滥用
![](https://imgkr2.cn-bj.ufileos.com/c69bcd64-0579-414d-b4a1-2f539042d568.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=hcC1ExZxMdh0LgzfCX%252B%252B6PEydA8%253D&Expires=1614997049)
- 用e.target获取触发元素
- 用matches来判断是否是触发元素