Question

我得到了这个code：

class Myclass{
  constructor(){
    this.img=document.querySelector("img");
    this.greeBox=document.querySelector(".aux");
    this.changeColor=this.changeColor.bind(this);//here I bind the listener
    this.items=document.querySelectorAll(".container [data-color]");
    this.actualColor="";
    this.auxAddListeneres();
    this.addListeneres();
  }
  auxAddListeneres(){
    this.greeBox.addEventListener("mousedown",this.auxChangeColor);
    this.greeBox.addEventListener("touchstart",this.auxChangeColor);
  }
  auxChangeColor(e){
    e.preventDefault();e.stopPropagation();
    this.style.backgroundColor=this.dataset.color;
    //this.actualColor=this.dataset.color  --> can't do this because "this" belongs to the handler
    //so to solve this I should bind it to the constructor
  }
   removeauxAddListeneres(){
    this.greeBox.removeEventListener("mousedown",this.auxChangeColor);
    this.greeBox.removeEventListener("touchstart",this.auxChangeColor);
  }
  changeColor(e){
    e.preventDefault();e.stopPropagation();
    //not "this" is the constructor
    this.actualColor="??????";
    console.log(this);
    console.log(e.target);
    // the problem is that I can't have the equivalent to "this" like inside the handler
    // and no, e.target not always is the object handler, because e.target could be the image
    //inside
    
  }
  addListeneres(){
    for(let i=0;i<this.items.length;i++){
    this.items[i].addEventListener("mousedown",this.changeColor);
    this.items[i].addEventListener("touchstart",this.changeColor);
    }
  }
  removeListeneres(){
    for(let i=0;i<this.items.length;i++){
    this.items[i].removeEventListener("mousedown",this.changeColor);
    this.items[i].removeEventListener("touchstart",this.changeColor);
    }
  }
}
let myclass=new Myclass();

*{magin:0;padding:0;box-sizing:border-box}
.container{
  width:100vw;height:100vh;
  display:flex;
  justify-content:start;
  align-items:flex-start;
}
img{
  width:30x;height:30px;
}
.item1{
  display:flex;
  justify-content:center;
  align-items:center;
  width:150px;height:150px;
  background-color:blue;
  border-radius:50%;
}
.aux{
  display:flex;
  justify-content:center;
  align-items:center;
  width:150px;height:150px;
  background-color:green;
  border-radius:50%;
}

<div class="aux" data-color="black">
    <img src="https://www.clker.com/cliparts/f/V/l/8/j/F/baby-elephant-red-md.png">
  </div>
<div class="container">
  <div class="item1" data-color="black">
    <img src="https://www.clker.com/cliparts/f/V/l/8/j/F/baby-elephant-red-md.png">
  </div>
  <div class="item1" data-color="yellow">
    <img src="https://www.clker.com/cliparts/f/V/l/8/j/F/baby-elephant-red-md.png">
  </div>
  <div class="item1" data-color="green">
    <img src="https://www.clker.com/cliparts/f/V/l/8/j/F/baby-elephant-red-md.png">
  </div>
  <div class="item1" data-color="orange">
    <img src="https://www.clker.com/cliparts/f/V/l/8/j/F/baby-elephant-red-md.png">
  </div>
</div>

如您所见，我正在使用classes，在调用“ this”时，在类内部是指该类，但与触发该事件的对象相对应的事件处理程序除外。考虑到这一点，我想保存触发处理程序的项目中的数据颜色，但是正如我所说的，“ this”属于该项目，因此我无法将其保存到类中，但是如果我绑定了可以侦听该类，但在这种情况下，我无法触发该函数处理程序的项目，因为在这种情况下，“ this”属于该类而不是该项目，因此您可能会认为e.target可以的工作，但不是这样，因为如果您单击图像，e.target将是该图像，而不是包装它的div。因此，是否有任何方法可以获取触发函数处理程序的项目，例如“ e.this”？使用类实际上变得很烦人

Answer 1

使用e.currentTarget而不是e.target来代替，class JB(object): def __init__(self, date, timeslot, group): self.date = date self.timeslot = timeslot self.group = group def timetableJB(self): print(self.date) tt1 = JB("8 Sept", (TS3_JB, TS4_JB, TS5_JB, TS6_JB), G1) tt2 = JB("15 Sept", (TS3_JB, TS4_JB, TS5_JB, TS6_JB), G2) tt3 = JB("22 Sept", (TS3_JB, TS4_JB, TS5_JB, TS6_JB), G3) class KL(object): def __init__(self, date, timeslot, group): self.date = date self.timeslot = timeslot self.group = group def timetableKL(self): print(self.date, self.timeslot, self.group) tt2 = KL("15 Sept", (TS1_KL, TS2_KL, TS3_KL), G1) tt3_1 = KL("22 Sept", (TS1_KL, TS2_KL, TS3_KL), G2) tt3_2 = KL("23 Sept", (TS4_KL, TS5_KL, TS6_KL), G3) class PP(object): def __init__(self, date, timeslot, group): self.date = date self.timeslot = timeslot self.group = group def timetablePP(self): print(self.date, self.timeslot, self.group) tt3 = PP("22 Sept", (TS1_PP, TS2_PP, TS3_PP), G1) tt4_1 = PP("29 Sept", (TS1_PP, TS2_PP, TS3_PP), G2) tt4_2 = PP("30 Sept", (TS4_PP, TS5_PP, TS6_PP), G3) print("") print("Clash analysis for timetable KL and JB") clashJB = JB()<----- I have error in this part clashKL = KL()<----- I have error in this part while clashJB.group and clashKL.group == G1: if clashJB.date == clashKL.date: print(clashJB.date)始终引用处理程序所附加的元素。

如何在事件处理程序中获取“ this”而不显式调用“ this”

1 个答案: