当前位置:首页 » 《随便一记》 » 正文

手写一个通用事件监听函数_I-AM-Yang的博客

5 人参与  2022年03月20日 13:59  分类 : 《随便一记》  评论

点击全文阅读


在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺

这次来写一个通用的事件监听函数,基于我们的事件冒泡,如果你不知道事件冒泡

需求,点击每个a,返回对应的内容

 <div id="div">
    <a id="p1" href="#">激活</a>
    <a id="p2" href="#">取消</a>
    <a id="p3" href="#">取消</a>
    <a id="p4" href="#">取消</a>
    <a id="p5" href="#">激活</a>
    <a id="p6" href="#">取消</a>
    <a id="p7" href="#">取消</a>
    <a id="p8" href="#">取消</a>
    <button class="btn">加载更多...</button>
  </div>

先封装一个函数,看代码

function bindEvent(elem, type, fn) {
  elem.addEventListener(type,fn)
}
//调用时,如
bindEvent(div,'click',function(){})

是这样吗?当然不是,要是这么简单那面试时就没什么可问的了

我们写的要考虑上事件代理这个情况让这个函数可以使用事件代理,也可以不用事件代理

function bindEvent(elem, type, selector, fn) {
  //判断一下,如果我们只传入三个值,那就是普通函数
  //如果是传入四个参数,那就是使用事件代理
  //selector是我们要代理的对象,如果没有,那就不是使用事件代理
  if(fn == null) {
    fn = selector
    selector = null
  }
  elem.addEventListener(type, function(e) {
    const target = e.target
    if(selector) {
      //使用事件代理
      if(target.matches(selector)) {
        //这matches主要是用来判断当前DOM节点是否能完全匹配对应的CSS选择器规则;
         //如果匹配成功,返 回true,反之则返回false
        //可以理解为当我们传入的selector===target.nodeName,返回true,否则false
        fn.call(target, e)
        //使用call函数,方便我们使用this指向我们点击的元素
      }
    }else {
      //普通调用
      fn.call(target, e)
    }
  })
}

 使用代理时

bindEvent(div1,'click','a',function() {
  alert(this.innerHTML)
})
//点击每个a时,都可以alert出a的值

使用普通函数时

bindEvent(div1,'click',function(e) {
  const target = e.target
  if(target.nodeName === 'A') {
    alert(target.innerHTML)
  }
})
//点击每个a时,都可以弹出相对应的值


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/36397.html

事件  代理  取消  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 此去经年人未还霍沉洲沈青禾后续结局霍沉洲
  • 山海不相逢内容精选(温逸尘沈衿)_山海不相逢内容精选(温逸尘沈衿)
  • (番外)+(全书)霍沉洲沈青禾此去经年人未还(霍沉洲沈青禾)_(霍沉洲沈青禾此去经年人未还)列表_笔趣阁(霍沉洲沈青禾)
  • (番外)+(全书)霍沉洲沈青禾(此去经年人未还霍沉洲沈青禾)完结_(霍沉洲沈青禾)列表_笔趣阁(此去经年人未还霍沉洲沈青禾)
  • 「重回八零,拒绝替嫁冲喜」章节彩蛋限时释出‌_卫东玉兰苏夏人气小说未删减节选
  • 重生七零祁同伟不再是农民儿子结局+番外纯净版全书免费重生七零祁同伟不再是农民儿子结局+番外纯净版全书免费
  • 傅雅宁的神女老婆,却在背地承欢作乐顾尘傅雅宁全书在线
  • 全文神女老婆,却在背地承欢作乐全局(顾尘傅雅宁)列表_全文神女老婆,却在背地承欢作乐全局
  • (番外)+(全书)此去经年人未还全书+番外+后续免费下载_(沈青禾霍沉洲)此去经年人未还全书+番外+后续列表_笔趣阁(沈青禾霍沉洲)
  • 完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续列表_完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续(林梦婉)
  • 妻子辱我爸受贿自杀,我掏出一等军功章节选推荐_[陈素云辰朋友]小说精彩章节分享
  • 全书浏览苔藓爬满旧日诺言新上(顾砚廷慕晚夏)_苔藓爬满旧日诺言新上(顾砚廷慕晚夏)全书结局

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1