DOM事件与事件委托

捕获与冒泡

捕获：从外向内找监听函数；
冒泡：从内向外找监听函数。

在为元素添加监听事件时，可以选则填写参数，让其在 捕获 or 冒泡 阶段执行

document.querySelector('类名').eddEventListener('click',fn,param)
param为true，捕获阶段执行；不加或为false，冒泡阶段执行

如何取消冒泡

e.stopPropagation() 可以取消冒泡
e.preventDefault() 可以取消事件的默认动作

如何声明一个自定义事件

const item = document.querySelector('类名等标识')
item.addEventListener('click',()=>{
  const event = new CustomEvent('ff',{  //声明自定义event
      detail:{name:'ff'},
    bubbles:true, //是否冒泡
    cancelable:true, //是否可以被阻止冒泡
  })
  item.dispatchEvent(event) //执行
})
//之后就可以在元素上监听这个自定义事件的执行
item.addEventListener('ff',(e)=>{
  console.log(e)
})

事件委托

在某些情况下, 无法直接对子元素进行事件监听, 于是在父元素上面添加对于子元素的监听, 即为事件委托.

优点为：可以节约监听数量 2；可以监听动态生成的元素。

关于判断子元素是否为想要监听的那一个

//假设div为父元素，子元素为button
div.addEventListener('click',(e)=>{
  const t = e.target  //e.target 为点击的那个元素,e.currentTarget 为添加监听的那个元素
  if(t.dataset.id==='id'){ // dataset 可以取到元素上以data开头的属性的值
      console.log('click') 
  }
})