I got this 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>As you see I'm using classes, inside classes when calling "this" is refer to the class except for event handlers that correspond to the object that fired the event. With this in mind, I want to save the data-color from the item that fired the handler, but as I said, "this", belongs to the item, so I can't save it into the class but if I bind the listener to the class it's possible, but in this case I can't have the item who fired the function handler because in that case "this" belongs to to the class not to the item, so you may be thinking that e.target could work, but i'ts not the case because if you click on the image, e.target will be that image and not the div that wrap it. So, is there any way to get the item that fired the function handler,something like "e.this"? It's actually becoming pretty annoying to work with classes
