美文网首页
封装一个通用的事件监听函数

封装一个通用的事件监听函数

作者: YukiWeng | 来源:发表于2020-04-23 15:08 被阅读0次

    封装一个通用的事件监听函数,可实现普通的事件监听,也可实现事件委托(事件代理)

    function bindEvent(el, type, selector, fn) {
      // 如果第四个参数不存在,则第三个参数就是fn
      if (!fn) {
        fn = selector
        selector = ''
      }
      // 普通的事件监听
      if (!selector) {
        el.addEventListener(type, fn)
        return
      }
      // 事件委托
      el.addEventListener(type, event => {
        let element = event.target
        // 点击的元素是否匹配期望的选择器
        while (!element.matches(selector)) {
          if (element === el) {
            element = null
            break
          }
          element = element.parentNode
        }
        element && fn.call(element, event, element)
      })
    }
    
    var beginButton = document.querySelector('.begin')
    var body = document.body
    
    // 普通点击事件
    bindEvent(beginButton, 'click', e => {
      e.stopPropagation()
      console.log(e.currentTarget)
    })
    
    // 事件委托
    bindEvent(body, 'click', '.stop', e => {
      console.log(e.target)
      console.log(e.currentTarget)
    })
    

    相关文章

      网友评论

          本文标题:封装一个通用的事件监听函数

          本文链接:https://www.haomeiwen.com/subject/nblaihtx.html