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

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

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)
})
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 工厂模式 单体模式 模块模式 代理模式 职责链模式 命令模式 模板方法模式 策略模式 发布-订阅模式 中介者模式 ...
    HelloJames阅读 4,626评论 0 6
  • 面向对象编程(OOP) 在前面的章节中,我们学习了Kotlin的语言基础知识、类型系统、集合类以及泛型相关的知识。...
    Tenderness4阅读 9,967评论 1 6
  • 01 就在昨天,香港诞生了第一位女特首。 这位女特首来自基层家庭。这对于香港这个两级分化很严重的社会来说,真的是一...
    颖之老师阅读 3,682评论 2 2
  • 绵绵的雨 虫鸣渐渐消散 黑色湮没了脚下的土壤 嫩芽在土壤里入眠 那些呼啸而过的声响 如冲破耳膜般 可你 并未听到 ...
    把全世界还给你阅读 2,312评论 1 0
  • 有一种温情 有一种恋爱 回想起来 嘴角微扬 淡淡苦涩浓浓的爱 我们牵着手 我们迎风走 路上的你总是傻笑 你眼中的我...
    蓝寻欢阅读 1,346评论 0 1

友情链接更多精彩内容