Javascript 添加onClick事件动态DOM对象

我正在编写基本的气球游戏。引出序号是在画布中动态创建的。一切正常，但我无法添加onclick事件来隐藏气球。开始游戏的第一个功能是Baslat。这是我的密码

var canvas; 
var sev = 1;
var zorluk = 3;
var ctx;

function Baslat() {
    var x;
    for (x = 1; x <= sev*zorluk; x++) {
        BalonYap(x);
    }
}

function seviye(a) {
    sev = a.value;
}

function BalonYap(id) {

    var img = new Image();
    img.src = "balon.png";
    img.id = "balon_"+id;
    img.onload = BalonLoad(img); // works
    img.onclick = Patlat(id); // doesn't work

}

function BalonLoad(img) {
    var rnd1 = Math.floor(Math.random() * 750)+10;
    var rnd2 = Math.floor(Math.random() *350)+10;
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    context.drawImage(img, rnd1, rnd2);
}

function Patlat(img) {
    alert();
}

---

您需要将函数分配给事件处理程序。如果你给一个函数赋值，它就会被调用。您可以尝试此工厂方法—您可以为包装函数提供任意参数，并在返回函数的闭包中使用这些参数：

function BalonLoad(img) {
    return function() {
        var rnd1 = Math.floor(Math.random() * 750)+10;
        var rnd2 = Math.floor(Math.random() *350)+10;
        canvas = document.getElementById('myCanvas');
        context = canvas.getContext("2d");
        context.drawImage(img, rnd1, rnd2);
    }
}

---

这里的部分问题是，您试图对DOM中不存在的元素分配事件回调。你只是在画布上画画。需要将单击事件应用于canvas元素。您需要保存每个引出序号的坐标，并在单击画布时使用该坐标查找相应的引出序号。

img.onclick=function{Patlatid；}我也使用了img.onclick=function{Patlatid；}，但它不起作用。我不是Javascript专家，我是PHP开发人员。我只是在javascript上提高了自己。我是否应该在画布中对所有气球的坐标使用onclick事件？所以，我想我不能像这样做。我是否应该获得所有图像坐标并将onclick事件添加到画布中？这将是我的第一个想法。在画布上绘制引出序号时，请将其起始坐标保存在对象中，如果该坐标发生变化，还可以保存其大小。在画布中隐藏气球意味着在单击气球的坐标处重新绘制气球图像，而不使用气球图像，并将其从坐标对象中删除。我希望这有帮助！尝试先设置onload，然后设置src，可能在附加侦听器之前加载。此外，您可能希望将图像添加到DOM中，以在其上触发事件。免责声明：这些只是基于过去经验的有益猜测