事件委托

1.事件委托

1.1定义

委托一个元素做本该自己做的事情

1.2场景一

如何给100个按钮添加点击事件？

1.解决方法

监听这着100个按钮的祖先，等冒泡阶段的时候判断target是不是这100个按钮中的一个

2.代码示例

代码示例

3.关键代码

div1.addEventListener('click', (e) => {
  const t = e.target //用户操作的元素
  if (t.tagName.toLowerCase() === 'button') {
    console.log('button被点击了')
    console.log('button的dataset-id是' + t.dataset.id)
  }
})

1.3 场景二

如何监听目前不存在的元素的点击事件？

1.解决方法

监听祖先即可，等点击的时候看看是不是想要的元素即可

2.代码示例

代码示例

3.关键代码

setTimeout(()=>{
  const button = document.createElement('button')
  button.textContent = 'click1'
  div1.appendChild(button)
},1000)

div1.addEventListener('click',(e)=>{
  const t = e.target
  if(t.tagName.toLowerCase()==='button'){
    console.log('button被点击了')
  }
})

1.4优点

1. 省内存
2. 可以监听动态元素

2.如何封装一个事件委托

2.1定义

将一个事件委托写成一个函数

2.2举例

1.要求

写出一个函数on('click','#testDiv','li',fn),当用户点击#testDiv里的li元素时，调用fn函数，要求用到事件委托

2.答案

递归判断target/target的爸爸/target的爷爷

3.代码

代码示例

4.关键代码

function on(eventType,element,selector,fn){
  if(!(element instanceof Element)){
    element = document.querySelector(element)
  }
 element.addEventListener(eventType, e => {
      let el = e.target
      while (!el.matches(selector)) {
        if (element === el) {
          el = null
          break //如果查到委托元素，还没找到，那么就退出递归
        }
        el = el.parentNode
      }
      el && fn.call(el, e, el)
    })
    return element
}