多个画布 - 尝试通过EventListener发送参数到函数

Question

该程序已与onclick协同工作，但我知道在HTML代码上使用onclick是不好的做法，我最好使用Event侦听器。

虽然我面临着将参数发送给我的函数的问题。我明白，当它只是一个画布时，要做到这一点就容易多了，像 document.getElementById（“canvas1”）。addEventListener（“click”，func，false）; 然后在函数中使用它，但是如果有多个呢？

这是我之前做过：

<canvas id="canvas1" width="100" height="100" onclick="boxClick(1)"> 
</canvas> 
<canvas id="canvas2" width="100" height="100" onclick="boxClick(2)"> 
</canvas> 
<canvas id="canvas3" width="100" height="100" onclick="boxClick(3)"> 
</canvas> 

有9幅油画像这样的（这是一个井字游戏）。 然后，

function boxClick(num) { 
    numId = "canvas" + num; 
    box = document.getElementById(numId); 
    ctx = box.getContext("2d"); 
} 

然后我用CTX绘制点击画布上我的形状。

如何实现与事件监听器相同的功能。

谢谢！

Answer 1

在可以实现纯JS是这样的，过得去类元素，然后结合监听到所有的所有的点击event.currentTarget给你点击的元素

function boxClick(event) { 
 
    console.log(event.currentTarget) 
 
    ctx = event.currentTarget.getContext("2d"); 
 
    console.log(ctx); 
 
} 
 

 
var classname = document.getElementsByClassName("box"); 
 

 

 

 
for (var i = 0; i < classname.length; i++) { 
 
    classname[i].addEventListener('click', boxClick, false); 
 
}

.box{ 
 
border:1px solid #ff0000; 
 
}

<canvas id="canvas1" width="100" height="100" class="box"> 
 
</canvas> 
 
<canvas id="canvas2" width="100" height="100" class="box"> 
 
</canvas> 
 
<canvas id="canvas3" width="100" height="100" class="box"> 
 
</canvas>

Answer 2

你需要通过“这个”，然后你可以参考该元素

function boxClick(element){ 
 
    alert(element.id) 
 
}

canvas{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color:red; 
 
}

<canvas id="canvas1" onClick="boxClick(this)"></canvas> 
 
<canvas id="canvas2" onClick="boxClick(this)"></canvas> 
 
<canvas id="canvas3" onClick="boxClick(this)"></canvas>

或者您可以将事件侦听器绑定到所有画布上，如下所示。

var canvas = document.getElementsByTagName('canvas') 
 

 
for (var i = 0; i < canvas.length; i++) { 
 
    canvas[i].addEventListener("click",box); 
 
} 
 

 
function box(){ 
 
    alert(this.id) 
 
}

canvas{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color:red; 
 
}

<canvas id="canvas1" ></canvas> 
 
<canvas id="canvas2" ></canvas> 
 
<canvas id="canvas3" ></canvas>