Question

这个程序已经可以用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个这样的画布（这是一个tic tac toe游戏）。然后，

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

然后我使用那个ctx在点击的画布上绘制我的形状。

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

谢谢！

Answer 1

在纯js中你可以实现就是这样，按类获取元素，然后将click监听器绑定到所有单击event.currentTarget，为你提供单击的元素

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你需要通过这个＆＃39;然后你可以引用那个元素

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者你可以将事件监听器绑定到这样的所有画布。

＆＃13;

var canvas = document.getElementsByTagName('canvas')

for (var i = 0; i < canvas.length; i++) {
  canvas[i].addEventListener("click",box);
}

function box(){
  alert(this.id)
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: