首页 > 其他 > 详细

封装绑定事件的处理函数(事件代理)

时间:2021-08-23 22:50:51      阅读:17      评论:0      收藏:0      [点我收藏+]
    <ul id="list">
      <li id="li1">项目一</li>
      <li>项目二</li>
      <li>项目三</li>
      <li>项目四</li>
    </ul>
      const list = document.getElementById(‘list‘)
      const li1 = document.getElementById(‘li1‘)
      function addEvent(ele, type, selector, cb) {
        if (!cb) {
          cb = selector
          selector = null
        }
        ele.addEventListener(type, function (e) {
          // e.stopPropagation()
          const target = e.target
          if (selector) {
            if (target.matches(selector)) cb.call(target, e)
          } else {
            cb.call(target, e)
          }
        })
      }
      addEvent(li1, ‘click‘, function (e) {
        console.log(1, e.target.innerHTML)
        console.log(2, this.innerHTML)
        console.log(this === e.target)
      })
      addEvent(list, ‘click‘, ‘li‘, function (e) {
        console.log(1, e.target.innerHTML)
        console.log(2, this.innerHTML)
        console.log(this === e.target)
      })

  1、this的指向:谁调用就指向谁

  2、addEvent定义在window中,调用addEvent时是window调用的,只是window省略不写,其中的this指向window

  3、事件函数中this指向事件侦听的DOM对象

  4、当addEvent中使用call将cb的this指向target时,再调用addEvent其中的this就指向target了,此时e.target === this

  5、以上都是在普通匿名函数中,若使用箭头函数,注意this会指向上一级this

 

封装绑定事件的处理函数(事件代理)

原文:https://www.cnblogs.com/wuqilang/p/15177617.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!