3、事件

题目：

• 编写一个通用的事件监听函数
• 描述事件冒泡的流程
  • 基于dom树形结构
  • 事件会顺着触发元素往上冒泡
  • 应用场景：事件代理
• 无限下拉图片列表，如何监听每个图片的点击
  • 事件代理
  • 通过e.target来获取触发元素
  • 用matches来判断是否触发元素

知识点

• 事件绑定（addEventListener）

const btn = document.getElementById('btn1')
btn.addEventListener('click',event=>{
  console.log('click')
})

//普通绑定：简易通用的事件绑定函数；详细通用事件绑定函数在下面将会提到
function bindEvent(elem,type,fn){
  elem.addEventListener(type,fn)
}

const a = document.getElementById('link1')
bindEvent(a,'click',e=>{
  e.preventDefault();        //阻止默认行为；比如组织链接的点击跳转
  console.log(e.target);    //获取点击的元素
  alert('this is aaa')
})

• 事件冒泡：顺着dom结构往上上冒泡
  • 例如：在body上添加事件，如果点击它子元素，那么都会冒泡到body上去
  • stopPropagation可以阻止冒泡

• 事件代理
  • 事件代理： 不好挨个去绑定事件，就绑定事件到它父标签上。
  • 事件代理是基于事件冒泡来做的，有了事件冒泡的机制才能在这个机制上去实现代理。
  • 事件代理的场景：一般是通过某种形式，比如图片列表的无限下拉加载。可能并不能知道容器里面到底有多少个图片标签，也没法一个个去绑定事件。这个时候我们就可以通过冒泡去获取事件，我们就可以通过一些方式去拿到这个点击的图片

事件绑定函数（考虑代理）

• 综合以上两种（加上冒泡的情况）

//代理绑定
function bindEvent(elem,type,selector,fn){        //selector要筛选的触发元素选择器
  if(fn == null){        //说明传的是三个参数；也就是知识普通绑定，第三个参数就是fn
    fn = selector;
    selector = null;
  }
  elem.addEventListener(type,event=>{
    //event.preventDefault();
    const target = event.target;
    if(selector){        //有selector也就是代理绑定（存在冒泡情况）
      if(target.matches(selector)){        //判断当前元素是否符合我们传入的这个选择器
        fn.call(target,event)
      }
    }else{        //没有selector，普通绑定情况
      fn.call(target,event)        //因为需要fn的this指向这个元素，所以要call绑定一下当前触发的元素
    }
  })
}


//代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3,'click','a',function(event){        //注意：这里不能用箭头函数，因为里面this指向
  event.preventDefault();
  alert(this.innerHTML)
})