我得到了这个
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”?
上课真的很烦人
