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

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

13 人参与  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