前端 事件冒泡 事件代理

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

• 事件绑定

// 默认的事件绑定
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')
})

2. 描述事件冒泡的流程

• 绑到大的元素上的事件，元素内的元素上事件也会触发上层元素事件

3. 无线下拉的图片列表（瀑布流），如何监听每个图片的点击

• 事件代理：通过冒泡机制，将点击事件绑定到图片列表的父级上；优点：代码更简洁，减少浏览器内存，但不可滥用

• 用e.target获取触发元素
• 用matches来判断是否是触发元素