构造函数中用addEventListener添加事件函数怎么改变this指向和传参

在构造函数中的方法中this指向的是实例化对象,但是当我们在使用elem.addEventListener("evtType",evtHandler)添加处理事件的时候,事件处理函数evtHandler()的this指向会改变成事件源elem,这时我们就不能用this调用构造函数的方法了。

改变this指向可以用箭头函数,bind和call/apply,其中bind比较特殊,和后二者不同,bind中不额外加()操作符,就不会立即函数,并且可以传参。当我们既要使用事件源elem又要通过this调用构造函数的方法时,bind就能很好的帮我们解决这个问题。
需要注意的是:bind是ES5中的方法,不兼容ie8。

那么,bind具体怎么使用呢?看下面一个加载图片的案例,我们创建一个image,加载完第一张图片后再加载下一张,我们给image监听load事件,在load处理函数中,我们要调用构造函数中的图片地址imgSrcList,但是这个时候this指向的是事件源image。在这个案例中我们既要通过this使用构造函数里面的属性和方法,又要设置事件源image的样式,就可以通过bind来实现。

image.addEventListener("load", this.loadHandler.bind(this指向,实参1,实参2,实参3));括号里第一个是事件函数中的this指向,后面接着参数,可以是一个或者多个;
而loadlHandler声明时的语法是这样的loadHandler(形参1,形参2,形参3,e),注意形参要跟实参一一对应,形参后面的e是事件

本例中我们把事件源image作为参数传入,image.addEventListener("load", this.LoadHandler.bind(this, image);
LoadHandler(img,e)(){console.log(e.target===img);}调用发现为true,说明实参image传递给了形参img,e就是事件,事件源e.target就是image,下面设置image的样式除了用img.style也可以使用e.target.style赋值。打印console.log(this,img,e); 发现this指向已经改变,指向了构造函数的实例化对象。

class LoadImage {
    imgWidth = 310
    imgHeight = 220
    imgList = []
    constructor(imgSrcList) {
      this.imgSrcList = imgSrcList
      // 加载图片
      this.loadImage()
    }
    loadImage() {
      var image = new Image();
      image.index = 0;
      image.addEventListener("load", this.loadHandler.bind(this,image));
      image.src = imgSrcList[image.index];
    }
    loadHandler(img,e) {
        console.log(e.target===img);
        console.log(this,img,a,e); 
        img.index++;
        var m = img.cloneNode(false);
        m.style.width = this.imgWidth + "px";
        m.style.height = this.imgHeight + "px";
        this.imgList.push(m);
        if (img.index > this.imgSrcList.length - 1) {
          img.removeEventListener("load", this.LoadHandler)
          return
        }
        img.src = this.imgSrcList[img.index];
      }
  }
  // 创建实例化对象
  var imgSrcList = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg", "./images/4.jpg", "./images/5.jpg", "./images/6.jpg", "./images/7.jpg"]
  var a=new LoadImage(imgSrcList)

你可能感兴趣的:(构造函数中用addEventListener添加事件函数怎么改变this指向和传参)