zoukankan      html  css  js  c++  java
  • 封装绑定事件的处理函数(事件代理)

        <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) // matches方法用来判断是不是点击了li,也可以用来判断是不是点击了某个选择器。也可以用e.target.nodeName==='LI'或e.target.constructor===HTMLLIElement来判断是不是点击了li元素
              } 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

  • 相关阅读:
    Linux指令面试题01-进程查看与终止
    微信网页授权
    腾讯视频怎么转成mp4模式 软件 工具 方法 最新【已解决】
    表操作,多对一、多对多、一对一
    初识数据库,基础sql语句
    IO多路复用
    协程:gevent
    线程:threading
    进程:multiprocessing
    利用socket与ssl模块读取网页内容
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15177617.html
Copyright © 2011-2022 走看看