多个画布 - 尝试通过 EventListener 向函数发送参数答案

【问题标题】：Multiple canvases - trying to send parameters to function via EventListener多个画布 - 尝试通过 EventListener 向函数发送参数
【发布时间】：2017-04-10 04:53:05
【问题描述】：

这个程序已经与 onclick 一起工作，但我知道在 html 代码上使用 onclick 是不好的做法，我最好使用事件侦听器。

不过，我在向我的函数发送参数时遇到了问题。我知道当它只是一张画布时，这样做会容易得多，比如 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 在单击的画布上绘制我的形状。

如何使用事件侦听器实现相同的目的。

谢谢！！

【问题讨论】：

标签： javascript html canvas onclick event-listener

【解决方案1】：

在纯js中你可以实现是这样的，按类获取元素，然后将监听器绑定到所有点击事件。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>

【讨论】：

【解决方案2】：

你需要传递'this'然后你可以引用那个元素

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>

【讨论】：