事件绑定与事件监听

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

  function bindEvent(elem, type, selector, fn) {
        
        
              if (fn == null){
        
        
                  fn = selector
                  selector = null
              }
              elem.addEventListener(type, event => {
        
        
                  const target = event.target
                  if(selector) {
        
        
                      // 代理绑定
                      if (target.matches(selector)){
        
        
                          fn.call(target, event)
                      }
                  } else {
        
        
                      // 普通绑定
                      fn.call(target, event)
                  }
              })
          }
  

• 描述事件冒泡的流程

  • 基于DOM树形结构
  • 事件会顺着触发元素往上冒泡
  • 应用场景：事件代理

• 无限下拉的图片列表，如何监听每个图片的点击

  • 事件代理
  • 用e.target获取触发元素
  • 用matches来判断是否上触发元素